html，，，，AngularJS 集合数据遍历显示实例，，，，，{{ item }}，， ，， var app = angular.module('myApp', []);， app.controller('myController', function() {， this.items = ['Apple', 'Banana', 'Cherry'];， });，，，，``在AngularJS中，集合数据遍历显示是一个常见的需求，通常使用ng-repeat指令来实现，以下是一个完整的实例，展示了如何在AngularJS应用中遍历并显示一个包含商品信息的集合：
实例代码
1、创建HTML文件：
创建一个名为index.html的文件，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS集合数据遍历显示</title>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/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>
<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>
</body>
</html>
2、解释代码：
引入AngularJS库：通过<script>标签引入了AngularJS的库文件。
定义AngularJS应用和控制器：使用angular.module方法创建了一个名为myapp的应用，并定义了一个控制器myctrl。
初始化数据：在控制器中，通过$scope.products初始化了一个包含两个商品对象的数组，每个商品对象都有id、name和price属性。
使用ng-repeat指令遍历数据：在表格的第二行（即<tr ng-repeat="product in products">）中使用了ng-repeat指令来遍历products数组中的每个商品对象。ng-repeat指令会为每个商品对象重复生成一行表格，并绑定相应的数据到表格单元格中。
显示数据：通过双大括号{{}}语法将商品对象的id、name和price属性值显示在对应的表格单元格中，使用$index变量来显示商品的序号（从1开始）。
运行实例
将上述代码保存到index.html文件中，然后在浏览器中打开该文件，即可看到如下所示的表格：
| 序号 | 商品编号 | 商品名称 | 价格 |
| 1 | 1001 | 数码相机 | 5000 |
| 2 | 1002 | 华为手机 | 4000 |
FAQs
问题1：如果商品数据是从服务器端获取的异步数据，应该如何处理？
解答：可以使用AngularJS的$http服务来发起异步请求获取数据，可以在控制器中使用$http.get方法向服务器发送GET请求，然后在回调函数中将返回的数据赋值给$scope.products，具体代码示例如下：
myapp.controller("myctrl",["$scope","$http",function($scope,$http){
$http.get("https://example.com/api/products").success(function(response){
$scope.products = response.data;
});
}]);
上面的URL"https://example.com/api/products" 是一个示例URL，实际使用时需要替换为真实的API端点。
问题2：如何使用filter过滤显示的商品数据？
解答：可以在ng-repeat指令中使用filter表达式来过滤显示的商品数据，如果想只显示价格大于3000的商品，可以在ng-repeat指令中添加一个过滤条件：<tr ng-repeat="product in products | filter:{price:3000}">，这样，只有价格大于3000的商品才会被显示在表格中。
小伙伴们，上文介绍了“AngularJS集合数据遍历显示的实例”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/798513.html
微信扫一扫 
