Angular ng-repeat 对象和数组遍历

直接上代码

 <!  DOCTYPE html  > 
 <  html  > 
 <  head  > 
 <  meta   name  ="description"   content  ="[Ngrepeat in obj and arr]"  > 
 <  script   src  ="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"  ></  script  > 
   <  meta   charset  ="utf-8"  > 
   <  title  > JS Bin </  title  > 
 </  head  > 
 <  body  > 

  
   <  div   ng-app  ="myApp"  > 
     <  div   ng-controller  ="testCtrl"  >  {{test1}}
          <  div  > 
             <  label   for  =""   ng-repeat  ="item in list1"  > {{item.id}} -- {{item.value}} </  label  > 
             <  p  ></  p  > 
           
             <  label   for  =""   ng-repeat  ="(key, value) in obj1"  > {{key}} -- {{value}} </  label  > 
             <  p  > 
                
             </  p  >  
            对于obj遍历的话  会根据key的首字母排序
              <  label   for  =""   ng-repeat  ="(key, value) in obj2"  >  
                {{key}} -- {{value.text}} -- {{value.value}}
              </  label  > 
            
         </  div  > 
     </  div  > 
 </  div  > 
  
  
 </  body  > 
 </  html  > 

 

 

JS

 var  app = angular.module('myApp' , []);
app.controller( 'testCtrl',  function   ($scope) {
    $scope.test1  = 'tt' ;
    $scope.list1  =  [{
        id:  '1' ,
        value:  'seti' 
    }, {
        id:  '2' ,
        value:  'kuma' 
    }, {
        id:  '3' ,
        value:  'cent' 
    }];
    $scope.obj1  =  {
         '1': 'seti' ,
             '2': 'kuma' ,
             '3': 'cent' 
    };
    $scope.obj2  =  {
         'ins':{text:'seti', value:'s1' },
         'abc':{text:'kuma', value:'s2' },
         'coln':{text:'cent', value:'s3' }
    };
}); 

 

查看更多关于Angular ng-repeat 对象和数组遍历的详细内容...