ng-options用法详解

原文地址：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

一个简单的例子：

<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用法详解相关推荐

linux中用less命令,Linux less 命令用法详解
原标题:Linux less 命令用法详解 less 是一个Linux命令行实用程序,用于显示文件或命令输出的内容,它一次只显示一个页面.它类似于 more ,但具有更高级的功能,允许您在文件中向前和 ...
linux mount命令参数及用法详解
linux mount命令参数及用法详解非原创,主要来自 http://www.360doc.com/content/13/0608/14/12600778_291501907.shtml. htt ...
Linux下的awk用法详解
Linux下的awk用法详解一.awk介绍二.awk的语法三.awk常见用法四.awk其他用法五.awk语言特性一.awk介绍 1.AWK 是一种处理文本文件的语言,是一个强大的文本分析工 ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
sizeof，strlen用法详解
sizeof 前向声明: sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着"辛苦我一个,幸福千万人"的伟大思想,我决定将其尽可能详细的总结一下. 但 ...
highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
Python中第三方库Requests库的高级用法详解
Python中第三方库Requests库的高级用法详解虽然Python的标准库中urllib2模块已经包含了平常我们使用的大多数功能,但是它的API使用起来让人实在感觉不好.它已经不适合现在的时代, ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
linux nc参数,linux nc命令参数及用法详解之毕业纪
linux nc命令参数及用法详解一.功能说明:强大的网络工具netcat 二.语法:nc [options] [options] -d 后台模式 -e prog 程序 ...
sizeof 在C语言的作用,C语言中的sizeof的用法详解
C语言中的sizeof的用法详解一.sizeof的概念 sizeof是C语言的一种单目操作符,如C语言的其他操作符++.--等.它并不是函数.sizeof操作符以字节形式给出了其操作数的存储大小.操 ...

ng-options用法详解

ng-options用法详解相关推荐

最新文章

热门文章