关于ng-options

在实际使用过程中对angular的ng-options指令有点不解，有的时候觉得很容易理解和上手，但其实等到遇到问题时，发现它很是生疏，(key,value)键值对获取，as关键词，track by 组合，还有group by，感觉里面应该有很多细的东西，而且还要搭配ng-model还有初始化值。等有时间慢慢研究一下，下面先记录刚刚碰到的问题：

group by使用时出现前面三个空白<optgroup label></optgroup>，

图1

图2

然后研究了一下代码：

//这是需要在界面显示的选项

$scope.funcFieldsSelect = [{"fieldName":"关闭","type":""},{"fieldName":"id","type":"INT"}] ;

因为默认选项是关闭状态，因为要按照type分组显示，所有的选项都保持一致性{"fieldName":"id","type":"INT"}格式，因此将type赋值为空。

然后在html中代码为

<select ng-model="selectedFields.funcFieldsSelected.fieldSelected" ng-options="funcVal.fieldName group by funcVal.type for funcVal in funcFieldsSelect">
</select>

然后显示为图1所示，保留了三个空白，后来尝试track by funcVal.fieldName

<select ng-model="selectedFields.funcFieldsSelected.fieldSelected" ng-options="funcVal.fieldName group by funcVal.type for funcVal in funcFieldsSelect track by funcVal.fieldName">
</select>

加上track by之后会少一个空白。

我怀疑空白是因为type:""导致的，后来发现可以这样改变一下，

$scope.funcFieldsSelect = ["关闭",{"fieldName":"id","type":"INT"}] ;

<select ng-model="selectedFields.funcFieldsSelected.fieldSelected" ng-options="(funcVal.fieldName||funcVal) group by funcVal.type for funcVal in funcFieldsSelect">
</select>

正常显示：

默认初始值可以设置为：

附官网ng-Options指令讲解：

select as and track by

items:

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

This will work:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

$scope.selected = $scope.items[0];

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>

$scope.selected = $scope.items[0].subItem;

In both examples, the track by expression is applied successfully to each item in the items array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. In the first example, thengModel value is items[0] and the track by expression evaluates to items[0].id with no issue. In the second example, thengModel value is items[0].subItem and the track by expression evaluates to items[0].subItem.id (which is undefined). As a result, the model value is not matched against any <option> and the <select> appears as having no selected value.

in one of the following forms:

• for array data sources:
  • label for value in array
  • select as label for value in array
  • label group by group for value in array
  • label disable when disable for value in array
  • label group by group for value in array track by trackexpr
  • label disable when disable for value in array track by trackexpr
  • label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
• for object data sources:
  • label for (key , value) in object
  • select as label for (key , value) in object
  • label group by group for (key, value) in object
  • label disable when disable for (key, value) in object
  • select as label group by group for (key, value) in object
  • select as label disable when disable for (key, value) inobject

Where:

• array / object: an expression which evaluates to an array / object to iterate over.
• value: local variable which will refer to each item in the array or each property value of object during iteration.
• key: local variable which will refer to a property name in object during iteration.
• label: The result of this expression will be the label for <option> element. Theexpression will most likely refer to the value variable (e.g. value.propertyName).
• select: The result of this expression will be bound to the model of the parent<select> element. If not specified, select expression will default to value.
• group: The result of this expression will be used to group options using the<optgroup> DOM element.
• disable: The result of this expression will be used to disable the rendered<option> element. Return true to disable.
• trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName). With this the selection is preserved even when the options are recreated (e.g. reloaded from the server).

<script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $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}
    ];
    $scope.myColor = $scope.colors[2]; // red
  }]);
</script>

<div ng-controller="ExampleController">
  <ul>
    <li ng-repeat="color in colors">
      <label>Name: <input ng-model="color.name"></label>
      <label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
      <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
    </li>
    <li>
      <button ng-click="colors.push({})">add</button>
    </li>
  </ul>
  <hr/>
  <label>Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select>
  </label><br/>
  <label>Color (null allowed):
  <span  class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span></label><br/>

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

  <label>Color grouped by shade, with some disabled:
    <select ng-model="myColor"
          ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
    </select>
  </label><br/>

  Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
  <br/>
  <hr/>
  Currently selected: {{ {selected_color:myColor} }}
  <div style="border:solid 1px black; height:20px"
       ng-style="{'background-color':myColor.name}">
  </div>
</div>

推荐文章：http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/