So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS-js-Tutorial-php.cn

So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS

亚连

Freigeben： 2018-06-15 13:58:06

Original

1704 Leute haben es durchsucht

Im Folgenden werde ich Ihnen ein Beispiel für das Durchlaufen und Anzeigen von AngularJS-Sammlungsdaten vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Wie unten gezeigt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>AngularJS集合数据遍历显示</title>
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>
 <body ng-app="myapp" ng-controller="myctrl">
  <table width="100%" border="1">
   <tr>
    <td>序号</td>
    <td>商品编号</td>
    <td>商品名称</td>
    <td>价格</td>
   </tr>
   <tr ng-repeat="product in products">
    <td>{{$index+1}}</td>
    <td>{{product.id}}</td>
    <td>{{product.name}}</td>
    <td>{{product.price}}</td>
   </tr>
  </table>
 </body>
 <script type="text/javascript">
  var myapp = angular.module("myapp",[]);
  myapp.controller("myctrl",["$scope",function($scope){
   $scope.products = [
    {
     id:1001,
     name:&#39;数码相机&#39;,
     price:5000
    },
    {
     id:1002,
     name:&#39;华为手机&#39;,
     price:4000
    }
   ];
  }])
 </script>
</html>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Direktivenfunktion in Vue

Wie Sie wiederholtes Rendern mit React verhindern

So implementieren Sie die Grid-Layout-Funktion mit Vue

Verwendung die Ersetzungsfunktion in Javascript

So verwenden Sie JavaScript, um die Audiowiedergabefunktion zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!