angularjs - Sorting data into categories and showing category headlines -

in angularjs, given dataset of animals, best way produce both personality view , size view?

---

personality view

animals personality: cute     cat     dog scary     snake     shark 

---

size view

animals 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'     } ]; 

---

what do

for personality view, use following code:

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

and size view, copy above code , change h1, h2s , filters.

the whole point here is: sort dataset category, display category headline each category.

so question is, seams known problem? how best solve it?

the filter filter has nothing here. want not filter, since want display data, order, , orderby filter way that.

however, there no "built-in" way display title. can make this fiddle, best idea create own directive.

<h1>animals personality</h1>  <li ng-repeat="animal in animals | orderby: pers">     <h2 ng-show="isnewpersonality(animal)">{{ animal.pers }}</h2>     {{ animal.name }} </li> 

controller :

$scope.lastpersonality = null; $scope.isnewpersonality = function (animal) {     if ($scope.lastpersonality != animal.pers)     {         $scope.lastpersonality = animal.pers;         return true;     }      return false; };