Question

编辑：尽可能只使用ng-options。

数据如何：

vm.category = [
    0: {
        label: 'Label A',
        children: [
            {
                label: 'Label A.1',
                value: 'labelA1',
            }
        ]
    }

    1: {},
    2: {}
]

它在HTML中的样子。 Expected HTML

<select>
    <optionGroup> Label A </optionGroup>
        <option value="labelA1"> Label A.1 </option>
        <option value="labelA2"> Label A.2 </option>
    <optionGroup> Label B </optionGroup>
        <option  value="labelB1"> Label B.1 </option>
</select>

如何在不尽可能改变数据结构的情况下实现这一目标？

我试过了ng-options="category.children.label group by category.label for category in vm.categoryTree"。但输出是

<select>
    <optionGroup> Label A </optionGroup>
        <option> undefined  </option>
    <optionGroup> Label B </optionGroup>
        <option> undefined </option>
</select>

Answer 1

最简单的方法是将数据映射到ng-options “分组更容易使用的格式”表达式

angular.module('so', []).controller('snippet', function() {
  this.categoru = [{"label":"Label A","children":[{"label":"Label A.1","value":"labelA1"}]},{"label":"Label B","children":[{"label":"Label B.1","value":"labelB1"}]}];

  this.options = this.categoru.reduce((flat, group) => {
    Array.prototype.push.apply(flat, group.children.map(child => {
      return Object.assign({
        parent: group.label
      }, child);
    }));
    return flat;
  }, []);
  console.log(this.options);
});

<form ng-app="so" ng-controller="snippet as vm">
  <select ng-model="vm.selected" 
          ng-options="opt.label group by opt.parent for opt in vm.options track by opt.value">
  </select>
  <pre>vm.selected = {{vm.selected | json }}</pre>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Answer 2

你可以这样做，

 <select ng-model='theModel' ng-change="display(theModel)">
        <optgroup ng-repeat='group in collection' label="{{group.Name}}">
        <option ng-repeat='veh in group.Fields' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
        </optgroup>
</select>

<强> DEMO

两级ng-options嵌套对象

2 个答案: