suchen

Heim >Web-Frontend >js-Tutorial >So durchlaufen und zeigen Sie Sammlungsdaten in Angular an

So durchlaufen und zeigen Sie Sammlungsdaten in Angular an

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 14:06:342443Durchsuche

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

php angular
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：So konfigurieren Sie die React Native-Entwicklungsumgebung in VSCodeNächster Artikel：So konfigurieren Sie die React Native-Entwicklungsumgebung in VSCode

In Verbindung stehende Artikel

Mehr sehen