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!
How to bind data in dropdownlist
What is the core of a database system?
Domestic free ChatGPT encyclopedia
asp what file
What should I do if the ps temporary disk is full?
How oracle rounds
Why do all the icons in the lower right corner of win10 show up?
The difference between PD fast charging and general fast charging
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
