JS集合数据遍历

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>
复制代码

你可能感兴趣的:(JS集合数据遍历)