Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
更新時(shí)間：2016年09月14日 09:14:03 投稿：lqh
這篇文章主要介紹了Angular ng-repeat對(duì)象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下
直接上代碼
<!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>
對(duì)于obj遍歷的話 會(huì)根據(jù)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‘},
‘a(chǎn)bc‘:{text:‘kuma‘, value:‘s2‘},
‘coln‘:{text:‘cent‘, value:‘s3‘}
};
});
相關(guān)文章
Angular依賴注入optional?constructor?parameters概念
這篇文章主要為大家介紹了Angular?依賴注入領(lǐng)域里?optional?constructor?parameters?的概念及使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Angular應(yīng)用程序在首次加載根組件時(shí)會(huì)在瀏覽器的顯示一個(gè)loading...動(dòng)畫，下面這篇文章主要給大家介紹了關(guān)于Angular4如何自定義首屏加載動(dòng)畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
本篇文章主要介紹了Angular2 之 路由與導(dǎo)航詳細(xì)介紹，詳細(xì)的介紹了路由的用法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-05-05
在Angular中使用依賴注入，可以幫助我們實(shí)現(xiàn)松耦合，可以說只有在組件中使用依賴注入才能真正的實(shí)現(xiàn)可重用的組件。2017-06-06
angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angularjs 中$apply，$digest，$watch詳解
這篇文章主要介紹了angularjs 中$apply，$digest，$watch詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
angular.JS實(shí)現(xiàn)網(wǎng)頁禁用調(diào)試、復(fù)制和剪切
這篇文章主要給大家介紹了angular.JS實(shí)現(xiàn)網(wǎng)頁禁用調(diào)試、復(fù)制和剪切的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
本文主要講解 AngularJS REST和定制服務(wù)的知識(shí)，這里幫大家整理了相關(guān)知識(shí)，并附示例代碼，詳細(xì)講解了RES和定制服務(wù)的知識(shí)，有興趣的小伙伴可以參考下2016-08-08
本文主要介紹了Angular的自定義指令，并提供了實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了AngularJS入門教程（一）：靜態(tài)模板,本文是系列文章的第二篇,本系列會(huì)用一個(gè)項(xiàng)目來講解AngularJS的使用,需要的朋友可以參考下2014-12-12