Angular中基于ng-repeat按icon分组生成多个div的实现需求

嘿，要实现按icon分组展示条目其实挺简单的，咱们一步步来搞定它！

首先，AngularJS自带的过滤器里没有直接的分组功能，所以咱们先整个自定义的groupBy过滤器，用来把你的条目按icon字段归类。在你的模块或者控制器里加上这段代码：

angular.module('yourModuleName')
.filter('groupBy', function() {
  return function(items, groupByField) {
    var groups = {};
    items.forEach(function(item) {
      var key = item[groupByField];
      if (!groups[key]) {
        groups[key] = [];
      }
      groups[key].push(item);
    });
    // 把分组对象转成数组方便遍历，同时按icon排序保持顺序
    return Object.keys(groups).map(function(key) {
      return {
        icon: key,
        items: groups[key]
      };
    }).sort(function(a, b) {
      return a.icon.localeCompare(b.icon);
    });
  };
});

接下来修改你的模板代码，先遍历分组后的结果，每个分组对应一个div，然后在分组里展示该icon对应的所有条目：

<!-- 遍历每个icon分组 -->
<div ng-repeat="iconGroup in model.availableItems | compareArrays:model.selectedItems:'alias' | filter:searchTerm | groupBy:'icon'" class="icon-group">
  <!-- 分组的头部（可以自定义样式） -->
  <div class="group-header">
    <i class="{{ iconGroup.icon }}"></i>
    <span>同图标条目</span> <!-- 这里可以换成你想要的分组标题，比如直接显示icon类名也行 -->
  </div>
  <!-- 该分组下的所有条目列表 -->
  <ul class="items-grid -three-in-row">
    <li ng-repeat="availableItem in iconGroup.items" ng-click="selectItem(availableItem)">
      <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
        <i class="{{ availableItem.icon }}"></i>
        {{ availableItem.name }}
      </a>
    </li>
  </ul>
</div>

这里有几个小细节要注意哈：

• 过滤器的顺序不能乱：先做compareArrays和filter过滤数据，再做groupBy分组，这样处理的是已经筛选后的结果，效率更高。
• 自定义的groupBy过滤器最后会把分组转换成数组，并且按icon名称排序，和你原来的orderBy:'icon'效果保持一致。
• 你可以给.icon-group、.group-header这些类加CSS样式，让分组看起来更清晰，比如给分组加个边框、头部背景色之类的，提升视觉效果。
• 如果不需要分组头部的文字，直接删掉span只留图标就行。

内容的提问来源于stack exchange，提问作者PEPEGA