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)文章
利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件
ionic是一個(gè)移動(dòng)端開(kāi)發(fā)框架,使用hybird技術(shù),只要使用前端開(kāi)發(fā)技術(shù)就可以開(kāi)發(fā)出電腦端,安卓端和ios端的站點(diǎn)程序。下面這篇文章主要給大家介紹了關(guān)于利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07Angular 4依賴注入學(xué)習(xí)教程之InjectToken的使用(八)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之InjectToken使用的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06Angular入口組件(entry component)與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件(entry component)與聲明式組件的區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04AngularJS實(shí)現(xiàn)單獨(dú)作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實(shí)現(xiàn)ng-repeat內(nèi)各個(gè)小的子作用域單獨(dú)數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看吧。2016-09-09使用Angular material主題定義自己的組件庫(kù)的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫(kù)的配色體系的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09基于AngularJs select綁定數(shù)字類型的問(wèn)題
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10