首页 技术 正文
技术 2022年11月23日
0 收藏 503 点赞 2,251 浏览 2378 个字

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中,如果没有指定,则默认绑定valuegroup:group by的条件,表示按某条件进行分组trackexpr:用于唯一确定数组中的迭代项的表达式

二、实例

通用的js代码:


AngularJS select中ngOptions用法详解

<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>

AngularJS select中ngOptions用法详解

label for value in array

html:


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

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


select as label for value in array

html:

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

效果:

AngularJS select中ngOptions用法详解


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>

效果:AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


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">

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


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">

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


label for ( key , value ) in object

html:

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

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


select as label for ( key , value ) in object

html:

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

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


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>

效果:

AngularJS select中ngOptions用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 


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用法详解

AngularJS select中ngOptions用法详解AngularJS select中ngOptions用法详解 

Blog:http://www.laixiangran.cn

GitHub:https://github.com/laixiangran

Weibo:http://weibo.com/laixiangran

Email:https://www.shuzhiduo.com/A/6pdDv10kJw/laixiangran@163.com

QQ:1452446775

AngularJS select中ngOptions用法详解(微信公众号-前端布道-laixiangran_js)

 分类: AngularJS,Javascript

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,240
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,108
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:5,913
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,725
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:6,969
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,404