首页
所有分类
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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Angular 4依赖注入学习教程之Injectable装饰器（六）
Jun 04 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 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
mp3Play(1) agg(1) apply(1) pandas(7) Pool(1) GUI(2) 数据处理(2) Tkinter(4) 矩阵(1) 音频(1)
You might like
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
javascript 常用方法总结
2009/06/03 Javascript
jquery tools之tooltip
2009/07/25 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
JS实现小星星特效
2019/12/24 Javascript
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
双语教学实施方案
2014/03/23 职场文书
学校端午节活动方案
2014/08/23 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
本溪水洞导游词
2015/02/11 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
建国大业电影观后感
2015/06/01 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
mysql如何查询连续记录
2022/05/11 MySQL