文章出處

一、用法

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
    

    
    

    


                        

    
    
    
            
    
    
    
        
    
            
    全站熱搜
    
        
    
        
    
                
    
    
    

    




                            
                
    
                        
                        



                                                    
                                                            
     
        
        

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