ng-options用法详解
2016-03-18 08:42
691 查看
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/
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
一个简单的例子:
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
一个简单的例子:
<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>
相关文章推荐
- ng-options用法详解
- 运行tomcat7w.exe,提示:指定的服务未安装unable to open the service tomcat7
- 运行tomcat7w.exe,提示:指定的服务未安装unable to open the service tomcat7
- Centos7下完美安装并配置mysql5.6
- corethink功能模块探索开发(一)根据已有模块推测目录结构
- 五大开源 Web 代理服务器横评:Squid、Privoxy、Varnish、Polipo、Tinyproxy
- Windows7 下 使用EasyBCD从磁盘安装Linux Mint
- Linux的namespace
- 发个谷歌,百度网盘,谷歌学术可用的网站
- 【Hadoop 10周年】我与Hadoop不得不说的故事
- 【Hadoop 10周年】我与Hadoop不得不说的故事
- 谈 Linux,Windows 和 Mac【转自王垠博客】
- Nginx(四):LNMMP架构实现Web动静分离
- red5下nginx安装配置
- Geek爱旅行 - Photoshop超现实场景
- Geek爱旅行 - Photoshop超现实场景
- Hadoop实战: Linux报 tmp 磁盘存储不足
- 大型网站运维需要干的那些事
- 高性能web系统的架构和系统优化
- Linux内核分析第四周总结