Angularjs：ng-options group by

Posted 2023-02-22

【中文标题】Angularjs：ng-options group by

【英文标题】：Angularjs: ng-options group by

【发布时间】：2013-09-08 01:34:50

【问题描述】：

我有这种一级树情况：

<select ng-model="tipost" 
        ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br>
</select>

json 在哪里：

[
  "ID":"1", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName1",
  "ID":"2", "IDPARENT":"1", "TIPIS":"GroupName1", "DESC":"CHILDNAME1",
  "ID":"3", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName2"
]

问题是这会与他们的孩子一起创建 optgroups 但会重复 根源也是：

- GroupName1
- GroupName2
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]

我要制作：

[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]

【参考方案1】：

如果您将 json 更改为以下内容，则分组不会像那样工作：

[
 "ID":"1", "TIPIS":"GroupName1", "DESC":"name",
 "ID":"2", "TIPIS":"GroupName1", "DESC":"name1",
 "ID":"3", "TIPIS":"GroupName2", "DESC":"name2",
 "ID":"4", "TIPIS":"GroupName1", "DESC":"name3",
]

然后你会得到你想要的分组方式

jsFiddle：http://jsfiddle.net/rtCP3/182/

【讨论】：

没错，但有没有办法在没有孩子时将根显示为选项，在有子时显示为 optgroup？这样我就可以将根视为 optgroup 和该组的选项。

您是否希望“根没有孩子时作为选项”可选？

是的，因为 desc 和 tipis 是同一个东西.. 这种方式是重复的.. optgroup 等于第一个选项。

但如果 optgroup 有子项，您不希望 optgroup 可选择吗？通常你不能选择 optgroups，你必须让他们成为一个孩子。

好吧，我有某种解决方案……如果我得到所有没有孩子的元素……这样我就可以得到没有元素的根选项……每个 optgroup 都只有孩子们。所以如果根组（tipis 是''）那么它只是一个选项......而如果tipis 有一些价值，它将在一个optgroup中。感谢您的指导。

【参考方案2】：

简单的下拉菜单，可以显示有和没有组的项目，也可以将一些项目设置为禁用：这里是plunk：https://plnkr.co/edit/uhsn4lmzssi6rrijPEAp?p=preview

 <select ng-model="ddl.selected"
    ng-options="item.id as item.text group by item.groupName disable when item.enabled===false for item in ddl.items"></select>

【参考方案3】：

我正在寻找相同的问题并找到了更好的答案。可以根据需要使用函数返回数据，例如在 getGarageName 下方的查询中

ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
// this is the data
cars = [
    "id": 1, "name": "Diablo", "color": "red", "garageId": 1,
    "id": 2, "name": "Countach", "color": "white", "garageId": 1,
    "id": 3, "name": "Clio", "color": "silver", "garageId": 2,
    ...
]
garages = [
    "id": 1, "name": "Super Garage Deluxe",
    "id": 2, "name": "Toms Eastside",
    ...
]

http://www.wenda.io/questions/2597799/angular-js-select-with-ngoptions-label-the-optgroup.html