Ionic中ng-repeat去重问题：如何去除CSV数据的重复选项

嘿，这个问题我之前也帮不少开发者解决过——本质就是你直接遍历了原始的CSV数据，而没先处理重复值。track by $index只是帮Angular避免重复DOM元素的报错，但根本不会过滤重复的站点名称。给你两个实用的解决方案：

方法一：控制器预处理去重数据 #

最直接的方式是在控制器里先把重复的站点名称过滤掉，生成一个只包含唯一值的数组，再用这个数组渲染下拉框：

// 假设这是你的控制器代码
angular.module('yourApp').controller('YourController', function($scope) {
  // 假设$scope.from是你从CSV读取的原始数据
  $scope.from = [/* 你的CSV数据 */];

  // 生成去重后的站点列表
  $scope.uniqueSources = [];
  var seenSources = {}; // 用对象记录已经出现过的站点

  angular.forEach($scope.from, function(item) {
    // 可选：如果需要忽略大小写，用item.source.toLowerCase()作为key
    var sourceKey = item.source;
    if (!seenSources[sourceKey]) {
      seenSources[sourceKey] = true;
      $scope.uniqueSources.push(sourceKey);
    }
  });
});

然后修改模板，遍历去重后的数组：

<select ng-model="srcstn">
  <option ng-repeat="source in uniqueSources track by $index">{{source}}</option>
</select>

方法二：自定义Angular过滤器（更灵活） #

如果你的项目里多处需要处理重复数据，自定义一个unique过滤器会更方便，复用性更强：

// 在你的app模块中定义过滤器
angular.module('yourApp').filter('unique', function() {
  return function(inputArray, propertyName) {
    var uniqueItems = {};
    var result = [];

    angular.forEach(inputArray, function(item) {
      var itemKey = item[propertyName];
      // 同样可选：忽略大小写的话用itemKey.toLowerCase()
      if (!uniqueItems[itemKey]) {
        uniqueItems[itemKey] = true;
        result.push(item);
      }
    });

    return result;
  };
});

然后在模板中直接使用这个过滤器，不需要修改控制器：

<select ng-model="srcstn">
  <option ng-repeat="x in from | unique:'source' track by x.source">{{x.source}}</option>
</select>

小提示 #

如果你的站点名称存在大小写差异（比如"XYZ"和"xyz"其实是同一个站点），记得在去重时统一转换为小写或大写，避免重复显示。

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