首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS使用ngOption实现下拉列表的实例代码

Posted in Javascript onJanuary 23, 2016

下拉列表的简单使用

ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：

$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];

运行结果如：

AngularJS使用ngOption实现下拉列表的实例代码

为了美观一点，这里引用了bootstrap。

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label>
<select ng-model="engineer.currentActivity" class="form-control"
ng-options="act for act in activities"> 
</select>
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
}]);
</script>
</body>
</html>

复杂对象，自定义列表名称

有的时候下拉列表并不是单纯的字符串数组，可能是json对象，例如：

$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

这个时候，绑定的数据就必须是与这里面的格式相同的数据，比如直接复制其中一条：

$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};

当然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循环列表拼接处下拉框的名称

<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select >

运行效果如：

AngularJS使用ngOption实现下拉列表的实例代码

全部的代码如下：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

实现下拉列表的分组

其实分组与前面的例子很像，只要把空间中的ng-options的值换成下面：

<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select >

添加 group by 就会按照后面的值进行分组

AngularJS使用ngOption实现下拉列表的实例代码

全部代码：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<!-- <select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select > -->
<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

按照id进行标识

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。

所以更多的时候会使用一个id进行标识，这样在初始化赋值的时候，只需要设定一个id就可以了。

$scope.engineer = {
currentActivityId: 3
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

指令可以写成下面的格式

<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select >

通过 as 前面的值，就可以确定唯一的一个选项

AngularJS使用ngOption实现下拉列表的实例代码

全部代码如下：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
current is: {{ engineer.currentActivityId}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
currentActivityId: 3
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

以上所述是小编给大家分享的AngularJS使用ngOption实现下拉列表的实例代码，希望对大家有所帮助。

AngularJS使用ngOption实现下拉列表的实例代码

- Author -

盗梦者

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
javascript数据类型示例分享
Jan 19 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
js图片切换具体实现代码
Oct 13 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Vue 兄弟组件通信的方法（不使用Vuex）
Oct 26 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 #Javascript
javascript实现全角转半角的方法
Jan 23 #Javascript
jQuery操作Table技巧大汇总
Jan 23 #Javascript
jquery采用oop模式class类的使用示例
Jan 22 #Javascript
jquery日历插件datepicker用法分析
Jan 22 #Javascript
js简单设置与使用cookie的方法
Jan 22 #Javascript
prototype框架中美元符号$用法分析
Jan 22 #Javascript
对讲机(1) GTX1660(1) win11(40) i7 6700(1) i5 9400(1) i5 10400(1) R71E(1) win10(43) R72E(1) React(6)
You might like
DSP接收机前端设想
2021/03/02 无线电
桌面中心(三)修改数据库
2006/10/09 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
JavaScript字符串对象substr方法入门实例（用于截取字符串）
2014/10/16 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python实现连连看辅助（图像识别）
2020/03/25 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
美国维生素、补充剂、保健食品购物网站：Vitacost
2016/08/05 全球购物
丝芙兰香港官网：Sephora香港
2018/03/13 全球购物
The Hut英国：英国领先的豪华在线百货商店
2019/07/26 全球购物
迪卡侬中国官网：Decathlon中国
2020/08/10 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
感恩节红领巾广播稿
2014/02/11 职场文书
学校清明节活动总结
2014/07/04 职场文书
东京审判观后感
2015/06/01 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript