Home > Article > Web Front-end > How to traverse and display collection data in Angular
How to traverse and display collection data in Angular
- php中世界最好的语言Original
- 2018-04-13 14:06:342380browse
This time I will show you how to traverse and display collection data in Angular. What are the precautions? Here is a practical case, let’s take a look at it together. .
is as follows:
<!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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!
Recommended reading:
Detailed explanation of the steps for using the custom paginator in Swiper
How to switch the arrow buttons in the swiper plug-in
The above is the detailed content of How to traverse and display collection data in Angular. For more information, please follow other related articles on the PHP Chinese website!