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下拉框

   label 和 value 具体是什么 

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

   label 和 value 具体是什么 



{{ selectedCity }}

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

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

   label 和 value 具体是什么 

演示 label 和 value 值的变化

{{ selectedCity }}

1. “数组”实现基本下拉

语法: laber for value in array


2. “包含对象的数组”实现“label 和 value值不同”的下拉

语法: select as label for value in array

哪位同学你认识?你的选择是:{{selectedStu}}




自定义下拉显示内容格式

哪位同学你认识?你的选择是:{{selectedStuString}}

语法:拼接字符串




使用group by对下拉菜单分组

语法:label group by groupName for value in array

哪位同学你认识?你的选择是:{{selectedStuString2}}

3. “对象”实现基本下拉

语法 1: label for (key , value) in object

哪个城市?你的选择是:{{scity}}

语法 2: select as label for (key ,value) in object

哪个城市?你的选择是:{{scity01}}

关于对象使用方法中 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的使用方法的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    虾类安装经验分享!

    虾类安装经验分享!,,虾类安装经验分享: 1,机箱的电源光盘应该接近代理价格,而内存和硬盘的价格是在互联网上找到的即时价格。主板套件,视频卡

    设置白天指令|切换白天模式的指令

    设置白天指令|切换白天模式的指令,,1. 切换白天模式的指令泰拉瑞亚的白天想要挑强调调就是时间,想要调到白天的话,第一个你要去点击设置当中

    csgo高手快捷键|csgo快捷键指令

    csgo高手快捷键|csgo快捷键指令,,1. csgo快捷键指令反恐精英全球攻势游戏中,死亡竞赛的回合时间60分钟:mp_roundtime 60,休闲/竞技模式的每局

    Python之可迭代对象、迭代器、生成器

    Python之可迭代对象、迭代器、生成器,迭代,生成器,一、概念描述可迭代对象就是可以迭代的对象,我们可以通过内置的iter函数获取其迭代器,可

    应用程序对象

    应用程序对象,,应用程序对象是一个应用程序级对象,用于在所有用户之间共享信息,并且在Web应用程序运行期间可以保存数据。 应用的性质: 方法

    dota2打电脑指令|dota1打电脑指令

    dota2打电脑指令|dota1打电脑指令,,1. dota1打电脑指令你打电脑Ai 首先就是模式-ap 全英雄选择-rd 随机英雄征召选择-random 就是给你随机

    电脑cpu指令大全|电脑cpu指令集

    电脑cpu指令大全|电脑cpu指令集,,电脑cpu指令集CPU芯片是微机硬件系统的核心,又称微处理器芯片,其中包括控制器、运算器和寄存器组。1、控制