ng-options用法详解

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会被绑定到ng-model。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。

之前一直在用ng-repeat就见到过track by，没有去了解它的用法，这次了解了一下。track by主要是防止值有重复，angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定，以方便追踪数据。例如：items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错，而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。

ng-options一般有以下用法：

对于数组：

  •  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)
  • 对于对象：
  •  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) in object

一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/angular.js"></script>
</head>
<body ng-app="selectExample"> 
  <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>
<script type="text/javascript">
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>
</body>
</html>

 

posted @ 2017-09-20 15:12  我要活的像太阳  阅读(324)  评论(0)  编辑  收藏  举报