AngularJS select中ngOptions用法详解【转】

一、用法

ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上。

数组:

label for value in array 
select as label for value in array
label group by group for value in array
select as label group by group for value in array
select as label group by group for value in array track by trackexpr

对象:

label for ( key , value ) in object
select as label for ( key , value ) in object
label group by group for ( key , value ) in object
select as label group by group for ( key , value ) in object

说明:

array / object: 数据源的类型,有数组和对象两种

value:迭代过程中,引用数组的项或者对象的属性值

key:迭代过程中,引用对象的属性名

label:选项显示的标签,用户可看到的

select:结果绑定到ngModel中,如果没有指定,则默认绑定value

group:group by的条件,表示按某条件进行分组

trackexpr:用于唯一确定数组中的迭代项的表达式

二、实例

通用的js代码:

<script>
    var MyModule = angular.module("MyModule",[]);
    MyModule.controller("Ctrl",["$scope", function($scope){
        $scope.colors = [
            {name:‘black‘, shade:‘dark‘},
            {name:‘white‘, shade:‘light‘},
            {name:‘red‘, shade:‘dark‘},
            {name:‘blue‘, shade:‘dark‘},
            {name:‘yellow‘, shade:‘light‘}
        ];
        $scope.object = {
            dark: "black",
            light: "red",
            lai: "red"
        };
    }]);
</script>

label for value in array

html:

<select ng-model="myColor" ng-options="color.name for color in colors"></select>

效果:


select as label for value in array

html:

<select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>

效果:



label group by group for value in array

html:

<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>

效果:


select as label group by group for value in array

html:

<select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">

效果:


select as label group by group for value in array track by trackexpr

html:

<select ng-model="myColor" ng-options="color.name for color in colors track by color.name">

效果:


label for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key for (key, value) in object"></select>

效果:


select as label for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key as key for (key, value) in object"></select>

效果:


label group by group for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>

效果:


select as label group by group for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>

效果:

原文地址:https://www.cnblogs.com/Bruce_H21/p/12636237.html

时间: 2024-10-21 16:43:46

AngularJS select中ngOptions用法详解【转】的相关文章

AngularJS select中ngOptions用法详解

一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in array select as label for value inarray labelgroup bygroupforvalueinarray selectaslabelgroup bygroupforvalueinarray select as label group bygroup for value in array track bytrackexpr 对

C#中const用法详解

本文实例讲述了C#中const用法.分享给大家供大家参考.具体用法分析如下: const是一个c语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程序也有一些帮助.另外const在其他编程语言中也有出现,如c++.php5.c#.net.hc08 c const 一般修饰 的变量为只读变量 const定义应该为在定义的时候初始化 以后不能改变他的值 例: 代码如下: const

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

ng-options用法详解

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

Django model select的各种用法详解

<Django model update的各种用法介绍>文章介绍了Django model的各种update操作,这篇文章就是她的姊妹篇,详细介绍Django model select的用法,配以对应MySQL的查询语句,理解起来更轻松. 基本操作 # 获取所有数据,对应SQL:select * from User User.objects.all() # 匹配,对应SQL:select * from User where name = '运维咖啡吧' User.objects.filter(

ORACLE中dual用法详解

基本上oracle引入dual为的就是符合语法1. 我们先从名称来说,dual不是缩写词,本身就是完整的单词.dual名词意思是对数,做形容词时是指二重的,二元的.2. Oracle中的dual表是一个单行单列的虚拟表.3. Dual表是oracle与数据字典一起自动创建的一个表,这个表只有1列:DUMMY,数据类型为VERCHAR2(1),dual表中只有一个数据'X', Oracle有内部逻辑保证dual表中永远只有一条数据. 4. Dual表主要用来选择系统变量或求一个表达式的值.5. 更

C++中的STL中map用法详解

Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候,在编程上提供快速通道.这里说下map内部数据的组织,map内部自建一颗红黑树(一种非严格意义上的平衡二叉树),这颗树具有对数据自动排序的功能,所以在map内部所有的数据都是有序的,后边我们会见识到有序的好处. 下面举例说明什么是一对一的数据映射.比如一个班级中,每个学生的学号跟他的姓名就存在着一一

Python中enumerate用法详解

enumerate()是python的内置函数.适用于python2.x和python3.xenumerate在字典上是枚举.列举的意思enumerate参数为可遍历/可迭代的对象(如列表.字符串)enumerate多用于在for循环中得到计数,利用它可以同时获得索引和值,即需要index和value值的时候可以使用enumerateenumerate()返回的是一个enumerate对象 >>> lst = [1, 2, 3, 4, 10, 5] >>> enumer

Python中self用法详解

在介绍Python的self用法之前,先来介绍下Python中的类和实例我们知道,面向对象最重要的概念就是类(class)和实例(instance). 类是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示. 而实例是根据类创建出来的一个个具体的"对象",每一个对象都从类中继承有相同的方法,但各自的数据可能不同. 1.以Student类为例,在Python中,定义类如下: class Student(object): pass (Object)表示该类从哪个类继承下来