Angularjs:ng-options group by

Posted

技术标签:

【中文标题】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

【讨论】:

以上是关于Angularjs:ng-options group by的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs:ng-options group by

Angularjs:ng-options group by

使用 AngularJS 的 ng-options 进行选择

使用 AngularJS 的 ng-options 进行选择

angularjs之ng-option

编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示