How to implement collection data traversal display in AngularJS-JS Tutorial-php.cn

How to implement collection data traversal display in AngularJS

亚连

Release： 2018-06-15 13:58:06

Original

1705 people have browsed it

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>

Copy after login

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!