快捷導(dǎo)航

angular ng-repeat數(shù)組中的數(shù)組實(shí)例

更新時(shí)間：2017年02月18日 08:57:57 投稿：jingxian

下面小編就為大家?guī)?lái)一篇angular ng-repeat數(shù)組中的數(shù)組實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

//先定義一個(gè)數(shù)組

anular代碼：

var app = angular.module('serApp', []); 

app.controller('indexCtrl', function($scope, $http) 
{ $scope.arrs = [{

<BR>　　　　　　　　　　　　　　　　　　 n:'a'； 
        arr:['1','2','1'] 
      },{<BR><BR> 　　　　　　　　　　　　　　　　　　 n:'b'； 
        arr:['4','5','6'] 
      }]; 
    })

html 代碼：

<BR>　　　　
<div ng-controller="indexCtrl"><BR>      
<p>{{name}}</p><BR>      

<ul><BR>        
 <li ng-repeat="name in names">{{name.n}}<BR>          
 <p ng-repeat="a in name.arr track by $index" id="{{$index}}">{{a}}</p><BR>        
 </li><BR>      
</ul>
<BR>    
</div><BR><BR>

track by $index 在有重復(fù)值時(shí)需加上這段代碼不然瀏覽器會(huì)報(bào)這個(gè)錯(cuò) Error: [ngRepeat:dupes]并且不會(huì)渲染到頁(yè)面

以上這篇angular ng-repeat數(shù)組中的數(shù)組實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJs用戶(hù)輸入動(dòng)態(tài)模板X(qián)SS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶(hù)輸入動(dòng)態(tài)模板X(qián)SS攻擊的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
AngularJS入門(mén)教程之Select(選擇框)詳解
本文主要介紹AngularJS Select,這里給大家整理一些資料詳細(xì)講解,并提供實(shí)例代碼,有需要的小伙伴參考下
2016-07-07
Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
angular $watch 一個(gè)變量的變化(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇angular $watch 一個(gè)變量的變化(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
學(xué)習(xí)Angular中作用域需要注意的坑
這篇文章記錄了當(dāng)時(shí)剛學(xué)習(xí)angular的時(shí)候踩的關(guān)于作用域的坑，希望給以后學(xué)習(xí)Angular作用域的朋友一個(gè)提醒，有需要的可以參考學(xué)習(xí)。
2016-08-08
AnjularJS中$scope和$rootScope的區(qū)別小結(jié)
這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別，文中運(yùn)用實(shí)例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-09-09
angular動(dòng)態(tài)表單制作
通過(guò)實(shí)例代碼給大家詳細(xì)講述了angular動(dòng)態(tài)表單的制作方法，對(duì)此有需要的朋友參考下。
2018-02-02
Angular.Js的自動(dòng)化測(cè)試詳解
當(dāng)Angular項(xiàng)目的規(guī)模到達(dá)一定的程度，就需要進(jìn)行測(cè)試工作了。為什么要自動(dòng)化測(cè)試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時(shí)的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細(xì)介紹了Angular.Js的自動(dòng)化測(cè)試，有需要的朋友們可以參考借鑒。
2016-12-12
Angular4 ElementRef的應(yīng)用
本篇文章主要介紹了Angular4 ElementRef的應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02