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

AngularJS中ng-options实现下拉列表的数据绑定方法

Posted in Javascript onAugust 13, 2018

下拉列表的简单使用

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中ng-options实现下拉列表的数据绑定方法

为了美观一点，这里引用了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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <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中ng-options实现下拉列表的数据绑定方法

全部的代码如下：

<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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <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中ng-options实现下拉列表的数据绑定方法

全部代码：

<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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <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中ng-options实现下拉列表的数据绑定方法

全部代码如下：

<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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <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中ng-options实现下拉列表的数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

AngularJS中ng-options实现下拉列表的数据绑定方法

- Author -

小飞鹤

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

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
Nov 30 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 #Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 #Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 #Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 #Javascript
数据处理(2) Tkinter(4) sortInts(1) Hudi(1) Apache(17) GUI(2) feDisplacementMap(1) Pool(1) 数据重复(1) WebSockets(3)
You might like
关于拼配咖啡，你要知道
2021/03/03 咖啡文化
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php的一些小问题
2010/07/03 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
JS JavaScript获取Url参数，src属性参数
2021/03/09 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
Javascript技术难点之apply，call与this之间的衔接
2015/12/04 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
原生js实现移动小球（碰撞检测）
2020/12/17 Javascript
Python抽象类的新写法
2015/06/18 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
浅析Python 多行匹配模式
2020/07/24 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
大学生学习自我评价
2014/01/13 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
车贷收入证明范本
2014/09/14 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
廉政承诺书2015
2015/04/28 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript