Angular ng-repeat排序成几个div

Question

我有一些代码，目前显示我的所有项目并按图标排序。

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

我的目标是为每个图标类型（类别）创建一个div并将它们放在div中我该如何在角度中执行此操作？我尝试过使用ng-if但是无法按照我想要的方式工作。期望的输出看起来像这样

Answer 1

您可以使用groupBy过滤器并相应地将css应用于每个li标签。

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

同样https://github.com/a8m/angular-filter也是一个很好的资源，它允许你在AngularJs框之外做更多的事情。

Answer 2

我相信这就是你所需要的： How can I group data with an Angular filter?

您需要做的就是将代码替换为图标组的div。