如何在ng-repeat下拉框中实现产品分类数组的拆分与去重？

我来帮你搞定这个问题！要实现把产品分类数组拆平、去重后在下拉框显示，咱们可以通过AngularJS的自定义过滤器来完成，这是最简洁的方案了👇

1. 创建自定义过滤器 #

在你的AngularJS应用里，定义一个专门处理分类扁平化和去重的过滤器：

// 假设你的app模块叫myApp
angular.module('myApp', [])
.filter('uniqueFlattenedCategories', function() {
  return function(products) {
    // 第一步：把所有产品的分类数组合并成一个一维数组（扁平化）
    const flattened = [];
    angular.forEach(products, product => {
      // 先判断分类是否存在且是数组，避免报错
      if (product.categories && Array.isArray(product.categories)) {
        flattened.push(...product.categories);
      }
    });
    
    // 第二步：对扁平化后的数组去重
    return flattened.filter((category, idx, arr) => arr.indexOf(category) === idx);
  };
});

2. 在下拉框中使用过滤器 #

然后在HTML的<select>里，直接用这个过滤器配合ng-repeat：

<select ng-model="selectedCategory">
  <option ng-repeat="category in products | uniqueFlattenedCategories" 
          value="{{category}}">
    {{category}}
  </option>
</select>

3. 可选：添加排序 #

如果希望分类按顺序显示，可以再加个orderBy过滤器：

<option ng-repeat="category in products | uniqueFlattenedCategories | orderBy:'toString()'" 
        value="{{category}}">
  {{category}}
</option>

原理说明 #

• 扁平化：遍历每个产品，把它的分类数组逐个合并到总列表里，把嵌套的数组变成一维列表。
• 去重：利用数组的filter方法，只保留第一次出现的分类项（通过判断当前项的索引是否等于它在数组中第一次出现的索引）。
• 容错处理：加入了对product.categories的存在性和类型判断，避免因为数据格式问题导致页面报错。

这样就能完美实现你想要的效果：从JSON获取产品分类，拆分数组、去重后动态生成下拉选项啦！

内容的提问来源于stack exchange，提问作者André Nakazato