Home >Web Front-end >JS Tutorial >Detailed explanation of AngularJS using ng-repeat to traverse two-dimensional array elements

Detailed explanation of AngularJS using ng-repeat to traverse two-dimensional array elements

小云云Original: 2017-12-22 10:51:432413browse

When doing a report project, there is a situation where the backend returns a two-dimensional array to me, and the data is put into the table in the frontend. Because we are using the frontend framework of angularJS, we use ng-repeat. accomplish. This article mainly introduces the method of AngularJS using ng-repeat to traverse two-dimensional array elements, and analyzes the related operation skills of AngularJS two-dimensional array element traversal in the form of examples. Friends who need it can refer to it. I hope it can help everyone.

Implementation method:

First in js:

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

In HTML:

Style 1:

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

Style 2:

<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">{{b}}</td>
</tr>
</table>

The test sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 遍历二维数组元素</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">
 遍历数组所有元素（样式一）：
 <ul ng-repeat="a in Week">
  <ul ng-repeat="b in a track by $index">
  <li><b style="color: green">{{b}}</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">{{b}}</td>
  </tr>
  </table>
</body>
</html>

Running effect:

Related recommendations;

Traversing two-dimensional arrays with different forms of output in PHP Methods

Array PHP code for traversing two-dimensional arrays

Discuss traversal in PHP Detailed explanation of several methods of two-dimensional array_PHP tutorial

The above is the detailed content of Detailed explanation of AngularJS using ng-repeat to traverse two-dimensional array elements. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Examples to explain vue v-for data processingNext article：Examples to explain vue v-for data processing

See more

Detailed explanation of AngularJS using ng-repeat to traverse two-dimensional array elements

Related articles