快捷導(dǎo)航

angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼

更新時(shí)間：2017年06月03日 16:35:39 作者：群來群往

本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在做報(bào)表的項(xiàng)目，有一種情況是后臺(tái)返回給我的是一個(gè)二維數(shù)組，在前臺(tái)將數(shù)據(jù)放入到表格中，因?yàn)槲覀冇玫氖茿ngularJS的前臺(tái)框架，所以利用ng-repeat來實(shí)現(xiàn)：

首先在js中：

復(fù)制代碼代碼如下:

$scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陜西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ];

在HTML中：

樣式一：

<ul ng-repeat="a in Week">
<ul ng-repeat="b in a track by $index">
<li><b style="color: green">{}</b></li>
</ul>
</ul>

樣式二：

<table style="border:solid 1px">
<tr ng-repeat="a in Week" style="border:solid 1px">
<td ng-repeat="b in a track by $index" style="border:solid 1px">
<b style="color: green">{}</td>
</tr>
</table>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐
這篇文章主要介紹了詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
再談Angular4 臟值檢測(cè)(性能優(yōu)化)
這篇文章主要介紹了再談Angular4 臟值檢測(cè)(性能優(yōu)化)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
詳解如何在Angular中快速定位DOM元素
本篇文章主要介紹了詳解如何在Angular中快速定位DOM元素，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
angular.extend方法的具體使用
本篇文章主要介紹了angular.extend方法的具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下
2016-11-11
angular組件間通訊的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于angular組件間通訊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
詳解AngularJS ng-class樣式切換
本篇文章主要介紹了詳解AngularJS ng-class樣式切換，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
這篇文章主要介紹了AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證及表單驗(yàn)證功能的方法,Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,需要的朋友可以參考下
2016-04-04
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié)，本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗(yàn)，狀態(tài)管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-05-05
Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例
這篇文章主要介紹了Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例，詳細(xì)的介紹了Material UI、Ag-grid等框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03