AngularJs中ng-options和ng-repeat的区别与用法

一、使用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

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”就不会出现错误了。

注意事项：必须与ng-model搭配使用。

示例：链接：https://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/

示例一：


  

    
      Name: 
       Disabled?
      X
    
    

      add
    
  
  

  Color (null not allowed):
    
  

  Color (null allowed):
  
    
      -- choose color --
    
  

 
  Color grouped by shade:
    
    
  

 
  Color grouped by shade, with some disabled:
    
    
  

 
  Select bogus.
  

  

  Currently selected: {{ {selected_color:myColor} }}
  
  

示例二：

    请选择经销商

示例三：

    请选择产品

示例四：

    请选择品牌

二、ng-repeat

ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。且所有的 HTML 元素都支持该指令。

ng-repeat的使用规则：

x in records；

(key, value) in myObj；

x in records track by $id(x)。

示例：

示例一：简单案例

{{x}}

示例二：使用数组循环输出一个表格

    

        
{{x.Name}}
        
{{x.Country}}
    

示例三：使用对象循环输出一个表格

    

        
{{x}}
        
{{y}}
    

三、将ng-repeat与下拉框的搭配使用

使用ng-repeat循环输出...标签

格式：

示例：

    请选择模板
    
    自定义

区别：

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会被绑定到ng-model。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。

 

四、其他用法参考相关链接

https://blog.csdn.net/weixin_35549724/article/details/82424443