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

2024-10-02 17:04:59

下拉列表的简单使用

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"
  ];

运行结果如：

为了美观一点，这里引用了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 >

运行效果如：

全部的代码如下：

<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 就会按照后面的值进行分组

全部代码：

<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 前面的值，就可以确定唯一的一个选项

全部代码如下：

<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的ng-model实例代码

什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样: var Classes = [ { "Name" : "温度 " , "Options" : [ "Cold" , "Hot" , "Normal" ]}, { "Name" : "份量 " , "Options" : [ "Big&qu
angularjs select 赋值 ng-options配置方法

数组方式数据是数组 $scope.years = [2014, 2015, 2016]; 页面元素 <select ng-model="item" ng-options="item as y for y in years"> </select> 设置默认值如果需要设置默认的选项,可以先设置一个参数: $scope.item = 2016; $scope.years = [2014, 2015, 2016]; 对象数组方式数据是对象数组
Angular中ng-options下拉数据默认值的设定方法

今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记直接上代码 <div class="form-group"> <label class="col-sm-2 control-label">教师</label> <div class="col-sm-10"> <select style="display:block; width:100%; heig
AngularJS学习笔记之ng-options指令

1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti
详解使用angularjs的ng-options时如何设置默认值(初始值)

这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b
AngularJS基础 ng-model-options 指令简单示例

AngularJS ng-model-options 指令 AngularJS 实例在失去焦点时绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></scrip
angularJs中ng-model-options设置数据同步的方法

后台请求任务量很大的时候,可以设置同步的时间和操作, 利用ng-model-options来实现,提高网站性能. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <
angular指令笔记ng-options的使用方法

1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection
AngularJS中ng-options实现下拉列表的数据绑定方法

下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择
AngularJS解决ng界面长表达式(ui-set)的方法分析

本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢? 比如: $scope.this.is.a.very.deep.obj = { 'name': 'xxx', 'state': 'active
AngularJS中监视Scope变量以及外部调用Scope方法

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ
AngularJS中控制器函数的定义与使用方法示例

本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex
angularjs中回车键触发某一事件的方法

要求:在输入框中输入值以后,按回车键触发某一事件的执行 html: <input id="input" name="input" ng-model="querykdUser.page.pageSize" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;"> js: $scope.myKeyup
在angularJs中进行数据遍历的2种方法

2种方式分别为: 1.数组数据遍历 2.对象数据遍历 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module"
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).
关于AngularJS中ng-repeat不更新视图的解决方法

最近写AngularJS项目中,遇到一个问题,先对数组进行赋值,ng--repeat正常工作,然后对数组进行修改,ng-repeat似乎没有工作,视图没有更新. 原因是ng-repeat会已默认值排序,由于我的数组中的元素有重复,所以ng-repeat没有对重复的元素进行刷新,只要对ng-repeat指定track by就可以了 <tr ng-repeat="selectedCriterias in selectedCriteriasArray track by $index"&
在AngularJS中使用jQuery的zTree插件的方法

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间
在React框架中实现一些AngularJS中ng指令的例子

首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 <i className={&qu

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

相关推荐

随机推荐