与AngularJs分组下拉列表

时间:2015-07-20 09:05:30

标签: angularjs list data-binding

如果我有一个具有以下结构的对象数组:

$scope.Skills = [
    {
        ...
        Name: 'Skill',
        ...
        SubSkills: [
            {
                ...
                Name: 'Sub skill',
                ...
            },
        ],
    },
];

根据示例,任何时候都有两个级别。

是否可以将包含顶级对象和子级别对象的下拉选项同时填充为以下内容:

<select data-ng-model="model.Skill" data-ng-options="option.SubSkills.Name group by option.Name for option in Skills">
    <!-- workaround browser bug -->
    <option value="" label=""></option>
</select>

要获得包含技能和子技能的单个下拉列表:

<empty option>
Skill 1
Skill 2
    Sub skill 1
    Sub skill 2
Skill 3
    Sub skill 1
Skill 4
Skill 5

你明白了。

我尝试按照AngularJs Docs提供的示例,但我得不到任何Subskills和技能是不可选择的:

$scope.colors = [
  {name:'black', shade:'dark'},
  {name:'white', shade:'light', notAnOption: true},
  {name:'red', shade:'dark'},
  {name:'blue', shade:'dark', notAnOption: true},
  {name:'yellow', shade:'light', notAnOption: false}
];

与以下HTML结合使用:

<label>Color grouped by shade:
    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
    </select>
</label><br/>

但是因为我的数据结构已经分组,所以我无法做到这一点。

0 个答案:

没有答案