＆QUOT;分组＆QUOT;在角JS平JSON NG-重复？ [英] "Grouped" ng-repeat with flat JSON in Angular JS?

问题描述

在过去，我已经做了分组NG重复嵌套JSON数据。这一次，我坚持用料，如：

In the past, I have done a "grouped" ng-repeat with nested JSON data. This time, I am stuck with a feed, such as:

...{
"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"
]
},...

我想创建按类别分组的图标，如

I am trying to create a page with the icons grouped by category, such as

Web Application Icons
    -- ng-repeat of matching icons
Text Editor Icons
    -- ng-repeat of matching icons
Medical Icons
    -- ng-repeat of matching icons

我试过这个开始，这与数据在多个级别之前曾经工作过：

I tried this to start, which worked once before with data at more than one level:

<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>

但是，这并不在这里工作。我错过了什么？ （再次，我需要的数据进行工作的正如的）。

But this does not work here. What did I miss? (again, I need to work with the data as is).

推荐答案

创建一个函数来获取所有类别：

Create a function to get all the categories:

$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;
  }

现在，您可以遍历所有的类别，以及遍历所有图标，具有匹配类别过滤只有那些里面。

Now you can loop over the categories, and inside that loop over all the icons, filtering only the ones with a matching category.

<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>

Plunker

这篇关于＆QUOT;分组＆QUOT;在角JS平JSON NG-重复？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！