码迷,mamicode.com
首页 > 编程语言 > 详细

Angular ng-repeat 对象和数组遍历

时间:2015-03-15 22:38:56      阅读:17156      评论:0      收藏:0      [点我收藏+]

标签:

直接上代码

<!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 对象和数组遍历

标签:

(2)
(3)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!