1、ng-options指令用途：

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有當涂免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在表達式中使用數(shù)組或?qū)ο髞碜詣由梢粋€select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項來讓用戶選擇。當select中一個選項被選擇，該選項將會使用ng-model自動綁定到對應(yīng)數(shù)據(jù)上。如果你想設(shè)一個默認值，可以像這樣：$scope.selected = $scope.collection[3]。

1.1  track by的用途：

track by主要是防止值有重復(fù)，angularjs會報錯。因為angularjs需要一個唯一值來與生成的dom綁定，以方便追蹤數(shù)據(jù)。例如：items=[“a”,“a”,“b”],這樣ng-repeat=“item in items”就會出錯，而用ng-repeat=“(key,value) in items track by key”就不會出現(xiàn)錯誤了。

1.2 ng-option使用注意

使用時候，必須加 ng-model 指令，否則無法使用會報錯

2、select下拉框中l(wèi)abel和value分別代表什么

先寫個最簡單最原始的select下拉框

  
    
    語文
    數(shù)學
    英語
    生物
  

現(xiàn)在引入 angular 使用 ng-options 指令來生成一個下拉框，看下生成頁面的代碼

  
  
  
  



  

    
      
      語文
      數(shù)學
      英語
      生物
    
    

    

    

    
{{ selectedCity }}
      

      
      
      
    
  


  

看下預(yù)覽的頁面效果，在后面添加的使用 ng-options 生成的select中，我們使用 obj 對象的 id作為select的value，使用obj 的city 作為 select 的label

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

  
  
  
  
  



  

    
      
      語文
      數(shù)學
      英語
      生物
    
    

      
演示 label 和 value 值的變化
 {{ selectedCity }}
      
      
      
    
    

      
1. “數(shù)組”實現(xiàn)基本下拉
      
語法： laber for value in array
      
      

    
    

      
2. “包含對象的數(shù)組”實現(xiàn)“l(fā)abel 和 value值不同”的下拉
      
語法： select as label for value in array
      
哪位同學你認識？你的選擇是：{{selectedStu}}
      
      

      

      

      
自定義下拉顯示內(nèi)容格式
      
哪位同學你認識？你的選擇是：{{selectedStuString}}
      
語法：拼接字符串
      
      

      

      

      
使用group by對下拉菜單分組
      
語法：label group by groupName for value in array
      
哪位同學你認識？你的選擇是：{{selectedStuString2}}
      
    
    

      
3. “對象”實現(xiàn)基本下拉
      
語法 1： label for (key , value) in object
      
哪個城市？你的選擇是：{{scity}}
      
      
語法 2： select as label for (key ,value) in object
      
哪個城市？你的選擇是：{{scity01}}
      
    
  
  

關(guān)于對象使用方法中 key 和 value 的一點說明

4、ng-options 全部用法補充

 標紅部分在代碼中已有例子，其余的請自行消化理解測試

對于數(shù)組：

• 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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。