Сортировка данных по категориям и указанием категории заголовки

Question

В AngularJS для данного набора данных животных, что это лучший способ, чтобы производить как видличности и вид размер?

---

вид Личность

Animals by personality: 
Cute 
    Cat 
    Dog 
Scary 
    Snake 
    Shark 

---

вид Размер

Animals by size: 
Small 
    Cat 
Medium 
    Dog 
    Snake 
Large 
    Shark 

---

Dataset

$scope.animals = [ 
    { 
     name: 'Cat', 
     pers: 'cute', 
     size: 'small' 
    }, 
    { 
     name: 'Dog', 
     pers: 'cute', 
     size: 'medium' 
    }, 
    { 
     name: 'Snake', 
     pers: 'scary', 
     size: 'medium' 
    }, 
    { 
     name: 'Shark', 
     pers: 'scary', 
     size: 'large' 
    } 
]; 

---

То, что я в настоящее время делают

Для зрения личности, я в настоящее время использую следующий код:

<h1>Animals by personality</h1> 

<h2>Cute</h2> 
<li ng-repeat="animal in animals | filter: 'cute'"> 
    {{ animal.name }} 
</li> 

<h2>Scary</h2> 
<li ng-repeat="animal in animals | filter: 'scary'"> 
    {{ animal.name }} 
</li> 

а затем для зрения размера, я скопируйте вышеуказанный код и измените h1, h2s и фильтры.

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

Так что мой вопрос в том, что это очень швы, как известная проблема? Как лучше всего это решить?

Answer 1

Фильтр filter здесь не имеет никакого отношения. То, что вы хотите сделать, это не фильтровать, так как вы хотите отображать все данные, а заказывать, а фильтр orderBy - это способ сделать это.

Однако, нет «встроенного» способа отображения названия. Вы можете сделать что-то вроде this Fiddle, но было бы лучше всего создать свою собственную директиву.

<h1>Animals by personality</h1> 

<li ng-repeat="animal in animals | orderBy: pers"> 
    <h2 ng-show="isNewPersonality(animal)">{{ animal.pers }}</h2> 
    {{ animal.name }} 
</li> 

Контроллер:

$scope.lastPersonality = null; 
$scope.isNewPersonality = function (animal) 
{ 
    if ($scope.lastPersonality != animal.pers) 
    { 
     $scope.lastPersonality = animal.pers; 
     return true; 
    } 

    return false; 
}; 

Answer 2

Используйте два вложенных нг-повторов. Вы можете либо выбрать категории отдельно, либо извлечь их из массива животных, используя underscorejs.

Пример:

<div ng-repeat="p in personalities" style="margin-bottom: 2em;"> 
    <h2>{{p}}</h2> 
    <ul> 
     <li ng-repeat="a in animals" ng-show="a.pers == p">{{a.name}}</li> 
    </ul> 
</div> 

А в контроллере:

$scope.animals = [...] 
$scope.personalities = _.uniq(_.pluck($scope.animals, 'pers')); 

рабочая скрипка: http://jsfiddle.net/U3pVM/3811/