AngularJS集合数据遍历显示

AngularJS集合数据遍历显示

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>AngularJS集合数据遍历显示</title>
 6         <script type="text/javascript" src="../js/angular.min.js"></script>
 7     </head>
 8     <body ng-app="myapp" ng-controller="myctrl">
 9         <table width="100%" border="1">
10             <tr>
11                 <td>序号</td>
12                 <td>商品编号</td>
13                 <td>商品名称</td>
14                 <td>价格</td>
15             </tr>
16             <tr ng-repeat="product in products">
17                 <td>{{$index+1}}</td>
18                 <td>{{product.id}}</td>
19                 <td>{{product.name}}</td>
20                 <td>{{product.price}}</td>
21             </tr>
22         </table>
23     </body>
24     <script type="text/javascript">
25         var myapp = angular.module("myapp",[]);
26         myapp.controller("myctrl",["$scope",function($scope){
27             $scope.products = [
28                 {
29                     id:1001,
30                     name:'数码相机',
31                     price:5000
32                 },
33                 {
34                     id:1002,
35                     name:'华为手机',
36                     price:4000
37                 }
38             ];
39         }])
40     </script>
41 </html>
posted @ 2017-12-26 18:55  学亮编程手记  阅读(2693)  评论(0)  编辑  收藏  举报