首页
所有分类
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 demo 基本技巧
Dec 18 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
深入理解JavaScript系列（30）：设计模式之外观模式详解
Mar 03 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
详解ES6中的let命令
Apr 05 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
全局锁(1) update(2) 索引(8) 索尼ICF-36(1) 德生2P3(1) tcp/ip(1) 备份(2) 数据库卡死(1) IP(1) 限速(1)
You might like
php图片缩放实现方法
2014/02/20 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP代码优化技巧小结
2015/09/29 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
js原型链原理看图说明
2012/07/07 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js窗口关闭提示信息（兼容IE和firefox）
2015/10/23 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
2019/04/12 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
python去除所有html标签的方法
2015/05/05 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python3中int（整型）的使用教程
2017/03/23 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
商务英语毕业生自荐信范文
2013/11/08 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
大学生个人求职信
2014/06/02 职场文书
端午节活动总结
2014/08/26 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
诚信承诺书
2015/01/19 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS