首页 技术 正文
技术 2022年11月23日
0 收藏 503 点赞 2,089 浏览 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

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141019.html

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

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站