AngularJS select中ngOptions用法详解【转】

2021-03-26 19:26

阅读：479

标签：显示说明 -o span ngoptions 选项 func oca group by

一、用法

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代码：

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>

效果：

技术图片

AngularJS select中ngOptions用法详解【转】

标签：显示说明 -o span ngoptions 选项 func oca group by

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

上一篇：HTTPS原理

下一篇：如何实现全站网页置灰——filter属性的妙用

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：AngularJS select中ngOptions用法详解【转】
文章链接：http://soscw.com/index.php/essay/68247.html

亲，登录后才可以留言！

AngularJS select中ngOptions用法详解【转】

一、用法

二、实例

label for value in array

select as label 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

评论

热门文章

推荐文章

最新文章

置顶文章