AngularJS - Группа по массиву

Question

У меня есть массив областей, каждый из которых может быть в одной или нескольких категориях.
Для eaxmple:

Locations: [{id: 1, 
    name: "NJ", 
    categories: [0, 2, 3] 
},{ 
    id: 2, 
    name: "NY", 
    categories: [0, 2] 
}] 

Categories: [{ 
    id: 0, 
    name: "Cities" 
}, { 
    id: 2, 
    name: "Canyons" 
}, { 
    id: 3, 
    name: "Work" 
}] 

В моем приложении я показываю все места с этим кодом:

<div ng-repeat="row in rows"> 
    {{ row.name }}<br> 
    Categories: <span enum-categories="row"></span> 
</div> 

Теперь я хочу добавить возможность сгруппировать элементы по их категориям ..
Моя проблема заключается в том, что каждый элемент может иметь более одной категории.

Результат должен быть примерно таким:

cat 0: 
NJ, NY 

cat 1: 
Nothing 

cat 2: 
NJ, NY 

cat 3: 
NJ 

Как это сделать?
Спасибо :)

Answer 1

Этот пользовательский фильтр делает то, что вам нужно

app.filter('locByCatFilter', function() { 
    return function(locations, catId) { 
    if (!locations || !catId) { 
     return; 
    } 
    return locations.filter(function(loc) { 
     return loc.categories.indexOf(catId) > -1; 
    }); 
    } 
}) 

Использование:

<ul> 
    <li ng-repeat ="cat in Categories"> 
     Category: {{cat.name}} 
     <ul> 
     <li ng-repeat="loc in filteredLoc =(Locations | locByCatFilter:cat.id)"> 
      {{loc.name}} 
     </li> 
     <li ng-if="!filteredLoc.length">None</li> 
     </ul> 
    </li> 
</ul> 

Если вы хотите использовать groupBy вы должны сопоставить данные первого и создавать дубликаты я считаю

DEMO

Answer 2

Awkay, что вам нужно сделать, это пользовательский фильтр:

<div ng-repeat="category in categories"> 
    {{ category.id }}<br> 
    Locations: 
    <span enum-categories="row" 
    ng-repeat="location in filteredLocations = 
       (locations | filter:hasCategory(category.id))"> 

    {{ location.name }} 
    </span> 
    <p ng-hide="filteredLocations.length">Nothing</p> 
</div> 

И в ваших JS:

yourModule.filter('hasCategory', function(){ 
    return function(location, categoryId) { 
     if(location.categories.indexOf(categoryId) != -1) { 
      return location; 
     } 
    }; 
});