Explication détaillée d'AngularJS utilisant ng-repeat pour parcourir les éléments d'un tableau bidimensionnel-js tutoriel-php.cn

Explication détaillée d'AngularJS utilisant ng-repeat pour parcourir les éléments d'un tableau bidimensionnel

小云云

Libérer： 2017-12-22 10:51:43

original

2348 Les gens l'ont consulté

Lorsque nous travaillons sur un projet de rapport, il arrive que le backend me renvoie un tableau bidimensionnel et que les données soient placées dans le tableau du frontend. Parce que nous utilisons le framework frontend d'angularJS, nous utilisons. ng-répéter. Cet article présente principalement la méthode d'AngularJS utilisant ng-repeat pour parcourir les éléments de tableau bidimensionnel et analyse les compétences opérationnelles associées à la traversée d'éléments de tableau bidimensionnel AngularJS sous forme d'exemples. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

Méthode d'implémentation :

Premier en js :

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

L'exemple de code de test est le suivant :

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

Copier après la connexion

Effet de course :