AngularJS集合数据遍历显示

最新推荐文章于 2021-06-07 11:50:12 发布

苘迷

最新推荐文章于 2021-06-07 11:50:12 发布

阅读量227

点赞数

分类专栏：前端文章标签： angularjs mvc

原文链接：https://www.mk2048.com/blog/blog.php?id=h0kb1bbbjakj&title=AngularJS%E9%9B%86%E5%90%88%E6%95%B0%E6%8D%AE%E9%81%8D%E5%8E%86%E6%98%BE%E7%A4%BA

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

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>