使用 ng-options 创建选择框

在select标签中使用 ng-options 指令来创建一个下拉列表，它可以接收一个数组或者对象，并对它们进行循环，将内部的内容提供给select标签内部的选项，如下实例:

如果你想设一个默认值，可以像这样： <option value="">自定义第一项</option>。

• 数据源为数组

            
                             
     
            
      //注意是ng-options, x for x in names写法, select标签中没有option标签　　　　　　　        
     
                
该实例演示了 ng-options 指令的使用。
    

• 数据源为对象

　　1.使用对象作为数据源, x 为键(key), y 为值(value)。

  
         
     
 
      
选择的网站是:
 
       //将x代表的key绑定到选项显示，value绑定到数据模型selectedSite  
      
你选择的值是: { {selectedSite}}
 
     
 
该实例演示了使用对象作为创建下拉列表。
   

　　2.选择的值为 key-value 对中的 value。value 在 key-value 对中也可以作为对象：（car01为x，{ brand: "Ford", model: "Mustang", color: "red" }为y）

  
         
     
 
      
选择一辆车:
 
        
      
你选择的是: { {selectedCar.brand}}
 
      
模型: { {selectedCar.model}}
 
      
颜色: { {selectedCar.color}}
 
      
注意选中的值是一个对象。
 
     
   

　　3.在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

  
         
     
 
      
选择一辆车:
 
       //value中的一个属性brand作为option选项的值，value绑定到ng-model上。 
      
你选择的是: { {selectedCar.brand}}
 
      
型号为: { {selectedCar.model}}
 
      
颜色为: { {selectedCar.color}}
 
      
下拉列表中的选项也可以是对象的属性。
 
     
   

ng-options 与 ng-repeat的比较

我们也可以使用ng-repeat 指令通过数组来循环HTML代码来创建下拉列表：

            
                             
     
            
      {
   {x}}  //ng-repeat是写在option里面        
     
                
该实例演示了使用 ng-repeat 指令来创建下拉列表。
    

ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options 的选项是一个对象， 而ng-repeat 是一个字符串。

• ng-repeat 有局限性，选择的值是一个字符串:

            
                             
     
            
      
选择网站:
            
       //此处ng-model里面必须写selectedSite，双向绑定，当option的值变时，下面表达式的内容也改变{
   {x.site}} //通过value属性，将选定的url值赋给 数据模型selectedSite            
      
你选择的是: {
   {selectedSite}}
        
     
                
该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。
    

• 使用 ng-options 指令，选择的值是一个对象：

            
                             
     
            
      
选择网站:
            
       //将选定的对象　　　　　　　　            
      
你选择的是: {
   {selectedSite.site}}
            
      
网址为: {
   {selectedSite.url}}
        
     
                
该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。
    

当选择值是一个对象时，{}中的内容，我们就可以获取更多信息（比如可以通过 selectedSite.关键字 来获得值），应用也更灵活。