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:500032 ????????????????},33 ????????????????{34 ????????????????????id:1002,35 ????????????????????name:‘华为手机‘,36 ????????????????????price:400037 ????????????????}38 ????????????];39 ????????}])40 ????</script>41 </html>AngularJS集合数据遍历显示
原文地址：https://www.cnblogs.com/niwotaxuexiba/p/8119544.html