Angular ng-repeat 对象和数组遍历实例
时间：2021-06-09 08:07:48|栏目：AngularJS|点击： 次
直接上代码
<!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‘}
};
});
栏 目：AngularJS
下一篇：Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
本文标题：Angular ng-repeat 对象和数组遍历实例
本文地址：http://www.codeinn.net/misctech/138508.html
