文章出處

一、用法

ngOption針對不同類型的數據源有不同的用法，主要體現在數組和對象上。

數組：

label for value in array 
select as label for value in array
label group by group for value in array
select as label group by group for value in array
select as label group by group for value in array track by trackexpr

對象：

label for ( key , value ) in object
select as label for ( key , value ) in object
label group by group for ( key , value ) in object
select as label group by group for ( key , value ) in object




說明：




array / object： 數據源的類型，有數組和對象兩種


value：迭代過程中，引用數組的項或者對象的屬性值


key：迭代過程中，引用對象的屬性名


label：選項顯示的標簽，用戶可看到的


select：結果綁定到ngModel中，如果沒有指定，則默認綁定value


group：group by的條件，表示按某條件進行分組


trackexpr：用于唯一確定數組中的迭代項的表達式




二、實例


通用的js代碼：






<script>
    var MyModule = angular.module("MyModule",[]);
    MyModule.controller("Ctrl",["$scope", function($scope){
        $scope.colors = [
            {name:'black', shade:'dark'},
            {name:'white', shade:'light'},
            {name:'red', shade:'dark'},
            {name:'blue', shade:'dark'},
            {name:'yellow', shade:'light'}
        ];
        $scope.object = {
            dark: "black",
            light: "red",
            lai: "red"
        };
    }]);
</script>




label for value in array


html:






<select ng-model="myColor" ng-options="color.name for color in colors"></select>








效果：










 




select as label for value in array


html：










<select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>




效果：


 


 




 label group by group for value in array






html：








<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>



效果：






 




 select as label group by group for value in array


html：








<select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">




效果：






 




 select as label group by group for value in array track by trackexpr


html：








<select ng-model="myColor" ng-options="color.name for color in colors track by color.name">




效果：






 




 label for ( key , value ) in object


html：








<select ng-model="obj" ng-options="key for (key, value) in object"></select>




效果：






 




 select as label for ( key , value ) in object


html：






<select ng-model="obj" ng-options="key as key for (key, value) in object"></select>




效果：





 


 label group by group for ( key , value ) in object


html：






<select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>




效果：






 




 select as label group by group for ( key , value ) in object


html：






<select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>




效果：












 





























文章列表


 

	

      
		不含病毒。www.avast.com 		
	



 

            

                        


    

        

            

                            

        

        

            arrow
        

        

            arrow
        

        
    
    
    
    
    
            
    

    



                        

    
    
    
            
    
    
    
        
    
            
    全站熱搜
    
        
    
        
    
        
    
    
    

    




                            
                
    
                        
                        

    
    
    創作者介紹
    

    
    
        
            創作者 大師兄 的頭像
        
        
    
            大師兄
            
    IT工程師數位筆記本
    
            
        
    
                    
            
    

    


                                                    
                                                            
    
        
                
    
    
        
    
    
    
    
        
    
            大師兄 發表在 痞客邦                    留言(0) 人氣()
                    
     
        
    
            E-mail轉寄