从一个数组动态创建ul列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从一个数组动态创建ul列表相关的知识，希望对你有一定的参考价值。
我正在使用angularjs（版本1），我知道它很旧，但是我需要使用此版本。
我有此列表
products = [
{
"productID": 1,
"productName": "product1",
"productCategoryName": "category1"
},
{
"productID": 2,
"productName": "product2",
"productCategoryName": "category1"
},
{
"productID": 3,
"productName": "product3",
"productCategoryName": "category1"
},
{
"productID": 4,
"productName": "product4",
"productCategoryName": "category2"
},
{
"productID": 5,
"productName": "product5",
"productCategoryName": "category2"
},
{
"productID": 6,
"productName": "product6",
"productCategoryName": "category3"
}];
我的html代码（不正确）：
<div class="form-group">
<div ng-repeat="product in vm.products | groupBy: 'productCategoryName'">
{{ product.productCategoryName}}
<ul>
<li>
<input type="checkbox" class="form-check-input" name="something">
<label> {{ product.productName }}</label>
</li>
</ul>
</div>
</div>
我想要的结果是能够为每个productCategoryName创建ul，如下所示：
<h3>category1</h3>
<ul>
<li>product1</li>
<li>product2</li>
<li>product3</li>
</ul>
<h3>category2</h3>
<ul>
<li>product4</li>
<li>product5</li>
</ul>
<h3>category3</h3>
<ul>
<li>product6</li>
</ul>
我可以检查这是否正确：<ul ng-if="vm.products[$index - 1].productCategoryName !== product.productCategoryName ">
所以当当前索引具有不同的类别时，我可以创建一个新列表，但是我的问题是我无法控制列表的关闭我不确定如何解决此问题，如果您有所帮助，那会很好。谢谢！
答案
这是一种方法。
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<div class="form-group">
<div ng-repeat="productGroup in groups">
<div>
{{ productGroup.productCategoryName}}
</div>
<ul>
<li ng-repeat="(key, value) in productGroup">
<input type="checkbox" class="form-check-input" name="something">
<label> {{ value.productName }}</label>
</li>
</ul>
</div>
</div>
</body>
</html>
angular.module('myapp', []).controller('mycontroller', function($scope, $filter){
$scope.products = [
{
"productID": 1,
"productName": "product1",
"productCategoryName": "category1"
},
{
"productID": 2,
"productName": "product2",
"productCategoryName": "category1"
},
{
"productID": 3,
"productName": "product3",
"productCategoryName": "category1"
},
{
"productID": 4,
"productName": "product4",
"productCategoryName": "category2"
},
{
"productID": 5,
"productName": "product5",
"productCategoryName": "category2"
},
{
"productID": 6,
"productName": "product6",
"productCategoryName": "category3"
}];
$scope.groups = $filter('groupBy')($scope.products, 'productCategoryName');
})
.filter("groupBy",["$parse","$filter",function($parse,$filter){
return function(array, groupByField){
var result = {};
var prev_item = null;
var groupKey = false;
var filteredData = $filter('orderBy')(array, groupByField);
for(var i=0; i < filteredData.length; i++) {
if (!result[filteredData[i][groupByField]]) {
result[filteredData[i][groupByField]] = [];
result[filteredData[i][groupByField]].productCategoryName = filteredData[i][groupByField];
}
result[filteredData[i][groupByField]].push(filteredData[i]);
}
return result;
}
}])
https://jsfiddle.net/8hscydq9/1/
为了提高性能，您可以提前创建组，然后显示该组。否则，将在每个角度摘要上重新创建组。
以上是关于从一个数组动态创建ul列表的主要内容，如果未能解决你的问题，请参考以下文章