Angular技术实现：按不同类别分类展示数据

嘿，看你用了$scope，应该是在AngularJS 1.x里开发对吧？按类别分组展示这个需求其实挺常见的，我给你分享几个实用的实现方案，你可以根据项目情况选：

方案一：使用第三方angular-filter库快速实现 #

如果项目里可以引入第三方依赖，angular-filter库的groupBy过滤器是最省心的选择：

1. 先引入angular-filter.js到你的项目（可通过npm下载或直接引入文件）
2. 在你的Angular模块里注入angular.filter依赖：

angular.module('yourApp', ['angular.filter']);

3. 模板里直接用groupBy过滤器分组：

<!-- 按cat字段分组遍历 -->
<div ng-repeat="(category, items) in catItems | groupBy: 'cat'">
  <!-- 显示类别标题 -->
  <h3>{{ category }}</h3>
  <!-- 遍历当前类别下的所有项 -->
  <ul>
    <li ng-repeat="item in items">
      <a href="{{ item.link }}" target="_blank">{{ item.name }}</a>
      <p>{{ item.desc }}</p>
    </li>
  </ul>
</div>

这个方案几乎不用写额外JS逻辑，直接在模板层面完成分组，非常高效。

方案二：自定义分组过滤器（无第三方依赖） #

如果不想引入额外库，自己写一个简单的分组过滤器也很容易：

1. 在你的模块里定义自定义过滤器：

angular.module('yourApp').filter('groupByCategory', function() {
  return function(items) {
    const groupedData = {};
    // 遍历原始数组，按cat字段分组
    angular.forEach(items, function(item) {
      const category = item.cat;
      // 如果当前类别不存在，初始化一个空数组
      if (!groupedData[category]) {
        groupedData[category] = [];
      }
      // 将当前项加入对应类别的数组
      groupedData[category].push(item);
    });
    return groupedData;
  };
});

2. 模板里使用自定义过滤器：

<div ng-repeat="(category, items) in catItems | groupByCategory">
  <h3>{{ category }}</h3>
  <ul>
    <li ng-repeat="item in items">
      <a href="{{ item.link }}" target="_blank">{{ item.name }}</a>
      <p>{{ item.desc }}</p>
    </li>
  </ul>
</div>

这个方案完全自主可控，适合对依赖有严格限制的项目。

方案三：在控制器预处理分组数据（适合复杂逻辑） #

如果需要在分组前做额外处理（比如排序、过滤某些项），建议先在控制器里把数据分组好：

1. 控制器里处理分组逻辑：

$scope.groupedCatItems = {};
// 遍历原始数组分组
angular.forEach($scope.catItems, function(item) {
  const category = item.cat;
  if (!$scope.groupedCatItems[category]) {
    $scope.groupedCatItems[category] = [];
  }
  $scope.groupedCatItems[category].push(item);
});

// 可选：给类别排序，保证展示顺序是A、B、C、D...
$scope.sortedCategories = Object.keys($scope.groupedCatItems).sort();

2. 模板里遍历排序后的类别：

<!-- 按排序后的类别遍历 -->
<div ng-repeat="category in sortedCategories">
  <h3>{{ category }}</h3>
  <!-- 取出当前类别下的所有项 -->
  <ul>
    <li ng-repeat="item in groupedCatItems[category]">
      <a href="{{ item.link }}" target="_blank">{{ item.name }}</a>
      <p>{{ item.desc }}</p>
    </li>
  </ul>
</div>

这个方案的优势是可以灵活控制分组逻辑，比如给类别排序、过滤掉某些不符合条件的项，或者给每个组添加额外属性。

额外小提示 #

• 如果你的cat字段存在大小写差异（比如'A'和'a'），可以在分组时统一转换为小写/大写，避免重复分组：const category = item.cat.toLowerCase();
• 如果需要给每个组添加展开/折叠功能，可以在控制器里给每个类别绑定一个isExpanded状态，配合ng-show/ng-hide实现。

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