首页 > 编程 > JavaScript > 正文

AngularJS集合数据遍历显示的实例

2019-11-19 14:38:35
字体:
来源:转载
供稿:网友

如下所示:

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>AngularJS集合数据遍历显示</title>  <script type="text/javascript" src="../js/angular.min.js"></script> </head> <body ng-app="myapp" ng-controller="myctrl">  <table width="100%" border="1">   <tr>    <td>序号</td>    <td>商品编号</td>    <td>商品名称</td>    <td>价格</td>   </tr>   <tr ng-repeat="product in products">    <td>{{$index+1}}</td>    <td>{{product.id}}</td>    <td>{{product.name}}</td>    <td>{{product.price}}</td>   </tr>  </table> </body> <script type="text/javascript">  var myapp = angular.module("myapp",[]);  myapp.controller("myctrl",["$scope",function($scope){   $scope.products = [    {     id:1001,     name:'数码相机',     price:5000    },    {     id:1002,     name:'华为手机',     price:4000    }   ];  }]) </script></html>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表