Below I will share with you an example of traversing and displaying AngularJS collection data. It has a good reference value and I hope it will be helpful to everyone.
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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement the directive function in vue
##How to prevent repeated rendering using React
How to implement the grid-layout function using vue
Related usage of js array reduce
How to use the replace function in javascript
How to implement audio playback function using JavaScript
The above is the detailed content of How to implement collection data traversal display in AngularJS. For more information, please follow other related articles on the PHP Chinese website!
403forbidden solution
ones function usage
How to solve the problem of missing ssleay32.dll
How to restore IE browser to automatically jump to EDGE
How to clear the WPS cloud document space when it is full?
Usage of Type keyword in Go
How to install wordpress after downloading it
How to solve timed out
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
