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

  
    
    语文
    数学
    英语
    生物
  

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

  
  
  
  



  

    
      
      语文
      数学
      英语
      生物
    
    

    

    

    
{{ selectedCity }}
      

      
      
      
    
  


  

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

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

  
  
  
  
  



  

    
      
      语文
      数学
      英语
      生物
    
    

      
演示 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

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