recherche

Maison  >  Article  >  interface Web  >  Comment implémenter l'affichage du parcours des données de collection dans AngularJS

Comment implémenter l'affichage du parcours des données de collection dans AngularJS

亚连
亚连original
2018-06-15 13:58:061722parcourir

Ci-dessous, je vais partager avec vous un exemple de parcours et d'affichage des données de collection AngularJS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Comme indiqué ci-dessous : 

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. avenir.

Articles associés :

Comment implémenter la fonction de directive dans vue

Comment empêcher le rendu répété à l'aide de React

Comment implémenter la fonction de disposition en grille à l'aide de vue

Utilisation associée de js array réduire

Comment utiliser la fonction de remplacement en javascript

Comment utiliser JavaScript pour implémenter la fonction de lecture audio

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment Vue.js utilise le framework mpvueArticle suivant：Comment Vue.js utilise le framework mpvue

Articles Liés

Voir plus