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