angular指令笔记ng-options的使用方法


Posted in Javascript onSeptember 18, 2017

1、ng-options指令用途:

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

1.1  track by的用途:

track by主要是防止值有重复,angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定,以方便追踪数据。例如:items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错,而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。

1.2 ng-option使用注意

使用时候,必须加 ng-model 指令,否则无法使用会报错

2、select下拉框中label和value分别代表什么

先写个最简单最原始的select下拉框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具体是什么</title>
</head>
<body>
  <select>
    <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
    <option value="1">语文</option>
    <option value="2">数学</option>
    <option value="3">英语</option>
    <option value="4">生物</option>
  </select>
</body>
</html>

现在引入 angular 使用 ng-options 指令来生成一个下拉框,看下生成页面的代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>label 和 value 具体是什么</title>
  <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>

<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <br>
    <br>
    <br>
    <div>{{ selectedCity }}
      <br>
      <!-- 这里  c.id as c.city for c in obj  我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label -->
      <select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
      </select>
    </div>
  </div>


  <script type="text/javascript">
  var myapp = angular.module('myapp', []);
  myapp.controller('mainCtrl', ['$scope', function($scope) {
    $scope.selectedCity = "bj";
    $scope.obj = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "郑州" }

    ];
  }])
  </script>
</body>

</html>

看下预览的页面效果,在后面添加的使用 ng-options 生成的select中,我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label

angular指令笔记ng-options的使用方法

3、三种ng-options常用方法: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>label 和 value 具体是什么</title>
  <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
  <style type="text/css">
  .mart30 {
    margin-top: 30px;
    border-top: 1px solid #000;
  }
  </style>
</head>

<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <div class="mart30">
      <h3>演示 label 和 value 值的变化</h3> {{ selectedCity }}
      <!-- 这里  c.id as c.city for c in obj  我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label -->
      <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
      </select>
    </div>
    <div class="mart30">
      <h3>1. “数组”实现基本下拉</h3>
      <p>语法: laber for value in array</p>
      <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
      <br>
    </div>
    <div class="mart30">
      <h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3>
      <p>语法: select as label for value in array</p>
      <p>哪位同学你认识?你的选择是:{{selectedStu}}</p>
      <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
      <br>
      <br>
      <br>
      <p><strong>自定义下拉显示内容格式</strong></p>
      <p>哪位同学你认识?你的选择是:{{selectedStuString}}</p>
      <p>语法:拼接字符串</p>
      <select ng-options="c.name as (c.name +'- 英文名:'+c.id) for c in obj2" ng-model="selectedStuString"></select>
      <br>
      <br>
      <br>
      <p><strong>使用group by对下拉菜单分组</strong></p>
      <p>语法:label group by groupName for value in array</p>
      <p>哪位同学你认识?你的选择是:{{selectedStuString2}}</p>
      <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
    </div>
    <div class="mart30">
      <h3>3. “对象”实现基本下拉</h3>
      <p>语法 1: label for (key , value) in object</p>
      <p>哪个城市?你的选择是:{{scity}}</p>
      <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
      <p>语法 2: select as label for (key ,value) in object</p>
      <p>哪个城市?你的选择是:{{scity01}}</p>
      <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
    </div>
  </div>
  <script type="text/javascript">
  var myapp = angular.module('myapp', []);
  myapp.controller('mainCtrl', ['$scope', function($scope) {
    //定义包含对象的数组 obj1
    $scope.obj1 = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "郑州" }
    ];
    $scope.selectedCity = "bj";

    // 定义数组
    $scope.arr1 = ["大白", "阿狸", "熊猫"];
    //定义默认为 “大白”
    $scope.selectedAnimal = "大白";

    //定义包含对象的数组 obj2
    $scope.obj2 = [
      { "id": "lilei", "name": "李雷", "sex": "man" },
      { "id": "hanmeimei", "name": "韩梅梅", "sex": "woman" },
      { "id": "jack", "name": "杰克", "sex": "man" }
    ];
    $scope.selectedStu = "韩梅梅";

    //定义简单对象 obj3
    $scope.obj3 = {
      "湖北": "鄂",
      "广东": "粤",
      "河南": "豫"
    };
  }])
  </script>
</body>

</html>

关于对象使用方法中 key 和 value 的一点说明

angular指令笔记ng-options的使用方法

4、ng-options 全部用法补充

 标红部分在代码中已有例子,其余的请自行消化理解测试

对于数组:

  • label for value in array
  •  select as label for value in array
  •  label group by group for value in array
  •  label disable when disable for value in array
  •  label group by group for value in array track by trackexpr
  •  label disable when disable for value in array track by trackexpr
  •  label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对于对象:

  • label for (key , value) in object
  •  select as label for (key ,value) in object
  •  label group by group for (key,value) in object
  •  label disable when disable for (key, value) in object
  •  select as label group by group for(key, value) in object
  •  select as label disable when disable for (key, value) in object

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
用于table内容排序
2006/07/21 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
js加强的经典分页实例
2013/03/15 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python中常用信号signal类型实例
2018/01/25 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
单位介绍信范文
2014/01/18 职场文书
学校节能减排方案
2014/06/13 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
员工自我工作评价
2015/03/06 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫