Angular ng-repeat sort into several divs

Question

I have a some code that currently displays all my items and sort them by icon.

  <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'icon' | filter:searchTerm"
            ng-click="selectItem(availableItem)"
            class="-three-in-row">            
            <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
                <i class="{{ availableItem.icon }}"></i>
                {{ availableItem.name }}
           </a>
   </li>

My goal is to create a div for each icon type (categories) and place them inside the div how can I do that in angular? I have tried with ng-if but cant get it to work the way I want to. Desired output would look something like this

would you please explain more of what you want to do? (E.g: give us your desired HTML output) — Sajjad Shahi, May 04 '18 at 14:49
I think you need a [`groupBy` filter](https://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter), from `angular.filter` module — Aleksey Solovey, May 04 '18 at 14:57

score 1 · Accepted Answer · answered May 04 '18 at 15:44

You can use groupBy filter and apply css accordingly to each li tag.

<ul ng-repeat="(key, value) in stuff | groupBy: 'category'">
    category name: {{ key }}
      <li ng-repeat="item in value">
        item: {{ item.name }} 
      </li>
</ul>

Also https://github.com/a8m/angular-filter is a great resource as well that allows you to do more outside AngularJs box.

score 0 · Answer 2 · answered May 04 '18 at 15:33

0

I believe this is what you need: How can I group data with an Angular filter?

All you need to do is to substitute the key with the div for your icon group.

answered May 04 '18 at 15:33

Angelmenam

85
8

Angular ng-repeat sort into several divs

2 Answers2