Detailed explanation of AngularJS using ng-repeat to traverse two-dimensional array elements-JS Tutorial-php.cn

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

小云云

Release： 2017-12-22 10:51:43

Original

2349 people have browsed it

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 ] ];

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!