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>
