欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS集合数据遍历显示

程序员文章站 2022-06-15 15:25:50
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>

上一篇： 关于Tab切换中嵌套Swiper移动端滑动插件，导致Swiper插件失效的问题

下一篇： 基于JavaScript实现新年贺卡特效

推荐阅读