AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解

更新時(shí)間：2017年11月11日 11:42:07 作者：群來(lái)群往

這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結(jié)合實(shí)例形式分析了AngularJS二維數(shù)組元素遍歷的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法。分享給大家供大家參考，具體如下：

問(wèn)題：

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

實(shí)現(xiàn)方法：

首先在js中：

$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>

測(cè)試示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.dhdzp.com 遍歷二維數(shù)組元素</title>
 <script src="angular.min.js"></script>
 <script>
  var app=angular.module("lesson",[]);
  app.controller("oneCtrl",function($scope){
   $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陜西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ];
  });
 </script>
</head>
<body ng-app="lesson" ng-controller="oneCtrl">
 遍歷數(shù)組所有元素（樣式一）：
 <ul ng-repeat="a in Week">
  <ul ng-repeat="b in a track by $index">
  <li><b style="color: green">{}</b></li>
  </ul>
  </ul>
  遍歷數(shù)組所有元素（樣式二）：
  <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>
</body>
</html>

運(yùn)行效果：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CK編輯器更加精簡(jiǎn)，但必須滿足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE（漢化+上傳）的相關(guān)知識(shí),需要的朋友可以參考下
2020-05-05
淺談對(duì)Angular中的生命周期鉤子的理解
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細(xì)的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下
2017-07-07
AngularJS directive返回對(duì)象屬性詳解
這篇文章主要為大家纖細(xì)介紹了AngularJS directive返回對(duì)象屬性的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下
2016-03-03
詳解Angular路由之子路由
本文將介紹Angular子路由的用法，對(duì)此感興趣的同學(xué)，可以參考下
2021-05-05
angular *Ngif else用法詳解
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-01-01
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。
2017-07-07
Angular中SASS樣式的詳細(xì)使用教程
對(duì)于一個(gè)Sass用戶,只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下
2022-05-05
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來(lái)構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序
2024-02-02
Angularjs中的ui-bootstrap的使用教程
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02