首页
所有分类
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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
驱动模型(1) 路由(1) router(1) Date(1) 抽象类(1) 分区(2) 乱码(3) 静态压缩(1) 接口(1) 扫雷(1)
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
javascript计时器详解
2015/02/28 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python json模块使用实例
2015/04/11 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
浅谈python常用程序算法
2019/03/22 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
信息与计算科学专业推荐信
2014/02/23 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
商务考察邀请函模板
2015/02/02 职场文书
入党介绍人意见范文
2015/06/01 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL