Heim > Artikel > Web-Frontend > So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS

So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS

亚连Original: 2018-06-15 13:58:061711Durchsuche

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>

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!

JavaScript JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie Vue.js das mpvue-Framework verwendetNächster Artikel：Wie Vue.js das mpvue-Framework verwendet

In Verbindung stehende Artikel

Mehr sehen