首页 > 代码库 > ng-options语法详解

ng-options语法详解

2024-09-05 08:50:47   218人阅读

我们先看下options的这条语句

ng-options="value.id as value.label group by value.group for value in myOptions"
接下来谈谈自己的理解，value.id表示的是下拉列表中的存放的值，这个值与select的ng-model绑定，双向绑定到DOM中，但不影响下拉列表显示的值；
value.label表示的是下拉列表显示的值，这个值决定了下拉列表中显示的数据，但不会影响ng-model的值；
value.group表示的下拉列表分组的值，它只决定分组的数据；
value in myOptions，表示从myOptions里面重复取数据，名字为value。
叙述的不太好，但是把表现基本说清楚了。。
下面看个栗子：

例子1：
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CityController">
    <!--省略value.id时会作为一个对象引入-->
    <select  ng-model="city"
             ng-options="city.name for city in cities">
        <!--初始化-->
        <option value="">Choose City</option>
    </select>
    Best City: {{ city.name }}
</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
        .controller(‘CityController‘,function($scope) {
            $scope.cities = [
                {name: ‘Seattle‘},
                {name: ‘San Francisco‘},
                {name: ‘Chicago‘},
                {name: ‘New York‘},
                {name: ‘Boston‘}
            ];
        });
</script>
</body>
</html>


 


 


 例子2：




<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <title>select</title>
    <script src="http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js"></script>
    <script>
        var app = angular.module(‘app‘, []);
        app.controller(‘selectController‘, function ($scope) {
//            初始化下拉列表的显示值
            $scope.aa = ‘北京‘;
            $scope.Cities = [
                { id: 1, name: ‘北京‘, group: ‘中国‘ },
                { id: 2, name: ‘上海‘, group: ‘中国‘ },
                { id: 3, name: ‘广州‘, group: ‘中国‘ }];
        });
    </script>
</head>
<body>
<div ng-controller="selectController">
    <select ng-model="aa" ng-options="city.name as city.name group by city.group for city in Cities">
    </select>
    <h1>欢迎来到{{aa}}</h1>
</div>
</body>
</html>




可以看到，一个用了city.name，一个用了aa(可以看做city)，例子1和例子2分别用了两种不同的初始化方式


 


以下来自流浪猫の窝


<select
        ng-model="myOption"
        ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>
</select>

ng-model的值会指向select元素的当前选中项的value值. ng-options指令会用于填充select下拉选项,
它的值还需要深究一下: 我们从右边往左边看会比较容易,首先是: value in myOptions


它表示你要迭代当前作用域下的 myOptions 对象. 迭代时,myOptions对象里的每一项的名字就叫value.


接下来是: group by value.group


它告诉angular.js去创建这个标签:

<optgroup label="value.group">

    ...
</optgroup>

标签的label属性将会被value的group属性值填充.


最后是: value.id as value.label


value.id将会和模型进行绑定,它的值会被存进ng-model属性里去(也就是option的value值,被选中后就是select标签的value). 
如果你没有写value.id as,而是只写了value.label,那么,整个对象会被作为ng-model的值.


value.label就是option元素的选项名.这段代码渲染的结果如下:

<optgroup label="Group 1">

    <option value="http://www.mamicode.com/0">Item 1</option>

    <option value="http://www.mamicode.com/1">Item 2</option>
</optgroup>

请再仔细看一下,注意一下options的value属性: 你可能认为它的值应该是数据模型中的id属性值,但事实并非如此(虽然一开始我也这么认为).
事实上,它是一个递增的数字,
这个数字指向的是模型的索引值(这里的模型就是myOptions数组).
不用担心它-当用户选择某一项的时候,正确的id还是会被选中,并且传递到ng-model属性中去.
另外,如果你的ng-options表达式里没有value.id部分,那选中项对应的整个对象会成为ng-model的值.


你可以简单的测试一下:

<select
        ng-change="selectAction()"
        ng-model="myOption"
        ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>
</select>

当用户选中某一项的时候,ng-change 事件会被触发,你可以把它打印出来:


$scope.selectAction = function() {

console.log($scope.myOption);

};

最后提一下,一般select标签都会有一个初始状态,比如"--请选择--"这样.这一项是没有value值的.可以直接在select元素里加上一个option标签:

<option value="">-- 请选择 --</option>

这样是不影响数据模型的.如果用户没有选择,或者选择了这个 "--请选择--" 项,那ng-model值就是空.很好理解.

ng-options的语法有点反人类.合理的语法设计或许应该是这样的:


foreach value in myOptions use value.label as label use value.id as model group by value.group


 
ng-options语法详解






























        

            
                
                  
                
                

                    联系

                    我们