“Grouped"在Angular JS中使用平面JSON
"Grouped" ng-repeat with flat JSON in Angular JS?
过去,我使用嵌套的JSON数据进行了"分组"ng-repeat。这一次,我只能使用提要,例如:
...{
"name": "Film",
"id": "film",
"unicode": "f008",
"created": 1,
"categories": [
"Web Application Icons"
]
}, {
"name": "th-large",
"id": "th-large",
"unicode": "f009",
"created": 1,
"categories": [
"Text Editor Icons"
]
}, {
"name": "th",
"id": "th",
"unicode": "f00a",
"created": 1,
"categories": [
"Text Editor Icons", "Medical Icons"
]
},...
我正在尝试创建一个按类别分组的图标页面,例如
Web Application Icons
-- ng-repeat of matching icons
Text Editor Icons
-- ng-repeat of matching icons
Medical Icons
-- ng-repeat of matching icons
我试着这样开始,它以前工作过一次在多个级别的数据:
<div class="row" ng-repeat="i in icons">
<h3 class="sh">{{i.categories[0]}}</h3>
<div class="col-md-4 col-sm-6 col-lg-3" ng-repeat="j in i.children | filter:faIconSearch">
<p><i class="fa fa-fw fa-{{j.id}}"></i> fa-{{j.id}}</p>
</div>
但这在这里不起作用。我错过了什么?(再次,我需要使用数据作为)。
创建一个获取所有类别的函数:
$scope.getCategories = function() {
var categories = [];
angular.forEach($scope.icons, function(item) {
angular.forEach(item.categories, function(category) {
if (categories.indexOf(category) == -1) {
categories.push(category);
}
})
});
return categories;
}
现在你可以遍历类别,并在其中循环遍历所有图标,只过滤具有匹配类别的图标。
<div class="row" ng-repeat="cat in getCategories()">
<h3>{{cat}}</h3>
<div ng-repeat="icon in icons | filter:{categories: cat}">
<span style="margin-left: 20px">{{icon.name}}</span>
</div>
</div>
恰好
相关文章:
- jQuery匹配JSON对象的部分文本
- 在循环中分配json值时,值被覆盖
- 需要帮助设置json数组
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 嵌套JSON到平面HTML表
- 用Javascript从两个平面结构数组中格式化JSON
- 尝试从“平面”JSON连接D3节点以制作公司层次结构图
- 从平面结构中的 JSON 中获取每个名称值
- 对嵌套 JSON 对象的平面 MySQL 查询
- Javascript:将平面 json 结构解析和排序为嵌套数组
- 无法使用AngularJS中的HTTP get调用从JSON平面文件返回结果
- PhantomJS中解析JSON平面文件的问题(请不要jquery,原始javascript)
- 从平面json生成(多级)flare.json数据格式
- 如何将平面JavaScript对象数组转换为嵌套的分层JSON结构
- 将平面JSON对象转换为树形数据结构
- 从平面json创建嵌套json
- “Grouped"在Angular JS中使用平面JSON
- 来自带有父ID的平面的分层json
- 使用平面数组过滤JSON对象