Home > Article > Web Front-end > How to implement collection data traversal display in AngularJS

How to implement collection data traversal display in AngularJS

亚连Original: 2018-06-15 13:58:061722browse

Below I will share with you an example of traversing and displaying AngularJS collection data. It has a good reference value and I hope it will be helpful to everyone.

is as follows:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement the directive function in vue

##How to prevent repeated rendering using React

How to implement the grid-layout function using vue

Related usage of js array reduce

How to use the replace function in javascript

How to implement audio playback function using JavaScript

The above is the detailed content of How to implement collection data traversal display in AngularJS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Vue.js uses the mpvue frameworkNext article：How Vue.js uses the mpvue framework

See more

How to implement collection data traversal display in AngularJS

Related articles