关于ng-option

Posted 2020-10-02 Dear 丶Lord

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

一个具体工作中的例子：

  <div class="input-field col s6" ng-class="{ ‘has-error‘:change_newStorage_carForm.arrive_city.$invalid&&submitted }">
             <select material-select watch id="arrive_city" name="arrive_city" ng-change="get_received(arrive_city.id)" ng-options="arrive_city.city_name for arrive_city in get_city"  ng-model="arrive_city" required>
                 <option value="" disabled selected>请选择</option>
             </select>

 

<label for="arrive_city">目的地城市</label>
</div>

     // 城市
        _basic.get($host.api_url+"/city").then(function (data) {
            if(data.success==true){
                $scope.get_city=data.result;
            }
        });
例如：
[
    {id: 100, city_name: "大连", city_status: 1, created_on: "2017-06-29T06:20:25.000Z"},
    {id: 101, city_name: "沈阳", city_status: 1, created_on: "2017-07-05T06:45:17.000Z"},
    {id: 102, city_name: "鞍山", city_status: 1, created_on: "2017-07-05T07:52:20.000Z"},
    {id: 103, city_name: "铁岭", city_status: 1, created_on: "2017-07-06T08:43:20.000Z"}
]

下拉选择的时候，

ng-model中的

arrive_city是一个选中的对象。 

  {id: 100, city_name: "大连", city_status: 1, created_on: "2017-06-29T06:20:25.000Z"}

ng-options="arrive_city.city_name for arrive_city in get_city"，中显示city.name的字段，value则是一个对象：{id: 100, city_name: "大连", city_status: 1, created_on: "2017-06-29T06:20:25.000Z"}

如果后台返回数据中有个默认的选中值，取出默认值的含有id的字段，假如100，

则先循环遍历

  $scope.get_city中的数据，

$scope.get_city.forEach(function (val) {
    if(val.id==100){
        $scope.select_city_start=val;
    }
});

通过id 来确认默认选中的那个对象，然后把这个选中的对象赋值给ng-model

$scope.start_city= $scope.select_city_start;