So durchlaufen und zeigen Sie Sammlungsdaten in Angular an-js-Tutorial-php.cn

So durchlaufen und zeigen Sie Sammlungsdaten in Angular an

php中世界最好的语言

Freigeben： 2018-04-13 14:06:34

Original

2422 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Sammlungsdaten in Angular durchlaufen und anzeigen. Was sind die Vorsichtsmaßnahmen für das Durchlaufen und Anzeigen von Sammlungsdaten in Angular? ein Blick.

lautet wie folgt:

<!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:'数码相机',
     price:5000
    },
    {
     id:1002,
     name:'华为手机',
     price:4000
    }
   ];
  }])
 </script>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung des benutzerdefinierten Paginators in Swiper

So wechseln Sie den Pfeil Schaltflächen im Swiper-Plug-in

Das obige ist der detaillierte Inhalt vonSo durchlaufen und zeigen Sie Sammlungsdaten in Angular an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!