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

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 的一点说明

完整代码及预览

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

angular指令笔记（一）：ng-options的更多相关文章

angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性这三个属性一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
angular学习笔记，很乱哈哈。
1.鼠标悬浮出现的信息v-bind:title="message" 2.对该便签进行结果判断显示隐藏v-if=''控制台设置 app3.seen = false(消失).控制台设置 ...
angular指令中使用ngModelController
在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互. 本篇主要介绍的是指 ...

随机推荐

NYOJ--94--cigarettes
/* Name: NYOJ--94--cigarettes Copyright: 2017 日天大帝 Date: 20/04/17 09:27 Description: 水题 */ #include ...
学习笔记TF051:生成式对抗网络
生成式对抗网络(gennerative adversarial network,GAN),谷歌2014年提出网络模型.灵感自二人博弈的零和博弈,目前最火的非监督深度学习.GAN之父,Ian J.Goo ...
一些方便的bash命令
1.文件名大小写转换: (1)大写转小写: ls | awk '{printf("mv %s %s\n", $0, tolower($0))|"sh"}' (2 ...
关于android appcompatv7 Menu items should specify a title的解决办法
做安卓开发时,添加menu时是AS报以下错误: 解决办法为修改如下: <menu xmlns:android="http://schemas.android.com/apk/res/ ...
CSS选择器大汇总
CSS选择器是学习CSS以及Web编程的基础. 整理出常用的CSS选择器,供自己和大家一起学习. 基本选择器 * /*通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)*/ #id /*id ...
github+hexo搭建自己的博客网站（三）主题之外的一些基本配置(图片位置，文章目录功能)
使用的yilia主题之后,还需要进行自己的定制配置 1.图片的位置比如打赏的支付宝二维码图片,是在当前博客的source/assets/img/下 (不是当前主题) 配置:(在yilia主题下文件里 ...
C语言指针（二）指向指针的指针
注意:指向指针的指针适合于做链表 1.声明方式:在变量名前放置两个*符号 int**var; 2.实例: #include<stdio.h>int main (){intvar;int*p ...
Apache Storm 1.1.0 中文文档 | ApacheCN
前言 Apache Storm 是一个免费的,开源的,分布式的实时计算系统. 官方文档: http://storm.apache.org 中文文档: http://storm.apachecn.org ...
Hacking JWT(JSON Web Token)
0x01 JWT工作流程 JSON Web Token(JWT)是一个非常轻巧的规范. 这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. JWT常被用于前后端分离,可以和Restful ...
Django 学习笔记（四）模板变量
关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量在hello/Hell ...

angular指令笔记（一）：ng-options

angular指令笔记（一）：ng-options的更多相关文章

随机推荐

热门专题