Angular ng-repeat 对象和数组遍历实例
更新时间：2016年09月14日 09:14:03 投稿：lqh
这篇文章主要介绍了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依赖注入optional constructor parameters概念
这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
Angular应用程序在首次加载根组件时会在浏览器的显示一个loading...动画，下面这篇文章主要给大家介绍了关于Angular4如何自定义首屏加载动画的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
本篇文章主要介绍了Angular2 之 路由与导航详细介绍，详细的介绍了路由的用法，具有一定的参考价值，有兴趣的可以了解一下2017-05-05
在Angular中使用依赖注入，可以帮助我们实现松耦合，可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。2017-06-06
今天小编就为大家分享一篇angularJs中$http获取后台数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
angularjs 中$apply，$digest，$watch详解
这篇文章主要介绍了angularjs 中$apply，$digest，$watch详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要给大家介绍了angular.JS实现网页禁用调试、复制和剪切的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
本文主要讲解 AngularJS REST和定制服务的知识，这里帮大家整理了相关知识，并附示例代码，详细讲解了RES和定制服务的知识，有兴趣的小伙伴可以参考下2016-08-08
本文主要介绍了Angular的自定义指令，并提供了实例代码，具有很好的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了AngularJS入门教程（一）：静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下2014-12-12
最新评论