“Grouped"在Angular JS中使用平面JSON

"Grouped" ng-repeat with flat JSON in Angular JS?

本文关键字：平面 JSON JS Angular Grouped quot      更新时间：2023-09-26

过去，我使用嵌套的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>

恰好

相关文章：