angular指令笔记(一):ng-options

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[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常用方法:

 1 <!DOCTYPE html>  2 <html>  3  4 <head>  5 <meta charset="utf-8">  6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  7 <title>label 和 value 具体是什么</title>  8 <script type="text/javascript" src="../js/angular-1.3.0.js"></script>  9 <style type="text/css">  10  .mart30 {   11  margin-top: 30px;  12  border-top: 1px solid #000;  13 }  14 </style>  15 </head>  16  17 <body ng-app="myapp">  18 <div ng-controller="mainCtrl">  19 <select>  20 <!--  21  value 是存储到数据库中的值,label是显示在页面上的值  22  value 就是 1、2、3、4这些数值;  23  lable 是"语文" “数学”这些  24 -->  25 <option value="1">语文</option>  26 <option value="2">数学</option>  27 <option value="3">英语</option>  28 <option value="4">生物</option>  29 </select>  30 <div class="mart30">  31 <h3>演示 label 和 value 值的变化</h3> { { selectedCity }}  32 <!-- 这里 c.id as c.city for c in obj 我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label -->  33 <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">  34 </select>  35 </div>  36 <div class="mart30">  37 <h3>1. “数组”实现基本下拉</h3>  38 <p>语法: laber for value in array</p>  39 <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>  40 <br>  41 </div>  42 <div class="mart30">  43 <h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3>  44 <p>语法: select as label for value in array</p>  45 <p>哪位同学你认识?你的选择是:{ {selectedStu}}</p>  46 <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>  47 <br>  48 <br>  49 <br>  50 <p><strong>自定义下拉显示内容格式</strong></p>  51 <p>哪位同学你认识?你的选择是:{ {selectedStuString}}</p>  52 <p>语法:拼接字符串</p>  53 <select ng-options="c.name as (c.name +'- 英文名:'+c.id) for c in obj2" ng-model="selectedStuString"></select>  54 <br>  55 <br>  56 <br>  57 <p><strong>使用group by对下拉菜单分组</strong></p>  58 <p>语法:label group by groupName for value in array</p>  59 <p>哪位同学你认识?你的选择是:{ {selectedStuString2}}</p>  60 <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>  61 </div>  62 <div class="mart30">  63 <h3>3. “对象”实现基本下拉</h3>  64 <p>语法 1: label for (key , value) in object</p>  65 <p>哪个城市?你的选择是:{ {scity}}</p>  66 <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>  67 <p>语法 2: select as label for (key ,value) in object</p>  68 <p>哪个城市?你的选择是:{ {scity01}}</p>  69 <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>  70 </div>  71 </div>  72 <script type="text/javascript">  73 var myapp = angular.module('myapp', []);  74  myapp.controller('mainCtrl', ['$scope', function($scope) {  75 //定义包含对象的数组 obj1  76  $scope.obj1 = [  77  { "id": "bj", "city": "北京" },  78  { "id": "sh", "city": "上海" },  79  { "id": "zz", "city": "郑州" }  80  ];  81  $scope.selectedCity = "bj";  82  83 // 定义数组  84  $scope.arr1 = ["大白", "阿狸", "熊猫"];  85 //定义默认为 “大白”  86  $scope.selectedAnimal = "大白";  87  88 //定义包含对象的数组 obj2  89  $scope.obj2 = [  90  { "id": "lilei", "name": "李雷", "sex": "man" },  91  { "id": "hanmeimei", "name": "韩梅梅", "sex": "woman" },  92  { "id": "jack", "name": "杰克", "sex": "man" }  93  ];  94  $scope.selectedStu = "韩梅梅";  95  96 //定义简单对象 obj3  97  $scope.obj3 = {  98 "湖北": "",  99 "广东": "", 100 "河南": "" 101  }; 102  }]) 103 </script> 104 </body> 105 106 </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

 

 

转载于:https://www.cnblogs.com/fighxp/p/7527744.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108153.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 两个栈实现一个队列

    用栈实现队列1、栈的特点栈的特点是先进后出,进出元素都是在同一端(栈顶)。入栈:出栈:2、队列的特点队列的特点是先进先出,出入元素是在不同的两端(队头和队尾)。入队:出队:3、两个栈实现队列我们拥有两个栈,可以让其中一个栈作为队列的入口,负责插入新元素;另一个栈作为队列的出口,负责移除老的元素。队列的主要操作无非有两个:入队和出队。在…

  • matlab如何保存生成的图片_将matlab输出图像保存为图片

    matlab如何保存生成的图片_将matlab输出图像保存为图片一种是出来图形窗口后手动保存(这儿又可以分两种):1直接从菜单保存,有fig,eps,jpeg,gif,png,bmp等格式。2edit——〉copyfigure,再粘贴到其他程序。另一种是用命令直接保存(这里也有两种):1用saveas命令保存图片。saveas的三个参数:(1)图形句柄,如果图形窗口标题栏是“Figure3”,则句柄就是3.(2)文件名。(3)单引号字符串,指…

  • Qt Mac 在软件 icns图标制作

    Qt Mac 在软件 icns图标制作

  • Keil(MDK-ARM)使用教程——在线调试

    Keil(MDK-ARM)使用教程——在线调试Keil(MDK-ARM)使用教程(三)_在线调试由于我是直接使用(打开现有的软件工程),如果跟着需要下载上面演示参考的软件工程才行。工程默认是使用硬件在线调试,接下来按照每一点来讲述。 1.编译+调试打开软件工程 -&gt; 编译 -&gt; 调试这里的编译建议使用BuildTarget(第2个按钮)编译工程(如下图动画),也就是使用快捷键F7。Translate(第1个按钮)是编译当前活动文…

  • 在Spring AOP切面中启用新事务

    在Spring AOP切面中启用新事务在工作中有一个在切面中需要记录一下操作日志的需求,而且要求这些操作日志要存入数据库,并且无论业务层有什么异常,日志照常记录,那就不能沿用业务层的事务,而是需要新启一个事务了。sping的声明式事务就是靠AOP来实现的,一般事务都在业务层中启用,那如果要在AOP的逻辑中启用一个新的事务要怎么做呢?比如下面的例子://定义一个切点,这里指com.lidehang.remote包下所有的类的方法…

  • USB流量分析「建议收藏」

    USB流量分析「建议收藏」1.USB接口简介通过监听USB接口流量,可获取键盘击键,鼠标移动与点击,存储设备的明文传输通信,USB无线网卡网络传输内容等。2.题目wireshark打开数据包后发现为usb协议USB协议数据部分在LeftoverCaptureData域中,使用tshark命令将其单独提取出来tshark-rudn.pcapng-Tfields-eusb.capdata>us

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号