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

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> label 和 value 具体是什么

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

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> label 和 value 具体是什么

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

3、三种ng-options常用方法

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> label 和 value 具体是什么

关于对象使用方法中 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章