Html 将重复排序为几个div

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

  <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中。我如何才能在angular中做到这一点？我试过使用ng if，但无法使其按我想要的方式工作。所需的输出看起来像这样

我相信这就是您所需要的：

---

您所需要做的就是用div替换图标组的键。

您可以使用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>

---

这也是一个很好的资源，可以让你在AngularJs之外做更多的事情。

请你解释一下你想做什么？例如：给我们你想要的HTML输出。我想你需要一个，来自angular.filter模块