AngularJS中抽象orderBy排序函数的实现方法问询

我来帮你搞定这个问题！要把控制器里的colourOrder函数抽出来，既保持代码整洁又不污染全局命名空间，AngularJS里有两种非常合适的方案，我给你一步步讲清楚：

方案一：自定义过滤器（最贴合模板场景） #

既然你是在ng-repeat里用orderBy，那自定义过滤器简直是量身定做的选择——过滤器就是Angular专门用来处理数据排序、格式化的工具，复用性拉满，还不用依赖控制器的作用域。

1. 创建自定义过滤器 #

在单独的文件（比如colour-order.filter.js）里写过滤器代码：

// 记得替换成你的实际应用模块名
angular.module('yourAppModule')
  .filter('colourOrder', function() {
    // 定义颜色优先级映射，比switch更简洁易维护
    const colourPriority = {
      Red: 1,
      Amber: 2,
      Green: 3
    };

    return function(items) {
      // 先复制原数组，避免直接修改源数据
      return items.slice().sort(function(a, b) {
        // 按优先级差值排序
        return colourPriority[a.colour] - colourPriority[b.colour];
      });
    };
  });

2. 在HTML里直接使用 #

原来的orderBy可以直接换成这个过滤器，不用改控制器：

ng-repeat="x in data | colourOrder"

方案二：用服务封装逻辑（适合多场景复用） #

如果这个排序逻辑不仅要在模板里用，还要在其他控制器、服务里调用，那用Angular的服务来封装会更灵活——服务是单例的，能让你的排序逻辑在整个应用里共享。

1. 创建排序服务 #

在单独的文件（比如colour-order.service.js）里写服务代码：

angular.module('yourAppModule')
  .service('ColourOrderService', function() {
    // 单独抽离优先级获取方法，方便复用
    this.getColourPriority = function(colour) {
      const priorityMap = {
        Red: 1,
        Amber: 2,
        Green: 3
      };
      // 给未知颜色一个默认优先级，避免排序出错
      return priorityMap[colour] || 0;
    };

    // 提供完整的排序方法，方便直接处理数组
    this.sortItemsByColour = function(items) {
      return items.slice().sort((a, b) => {
        return this.getColourPriority(a.colour) - this.getColourPriority(b.colour);
      });
    };
  });

2. 在控制器里注入并绑定 #

把服务注入到控制器，然后把排序方法绑定到作用域（或者用controllerAs语法更推荐，避免依赖$scope）：

angular.module('yourAppModule')
  .controller('YourController', function($scope, ColourOrderService) {
    // 绑定到$scope，和原来的用法保持一致
    $scope.colourOrder = function(x) {
      return ColourOrderService.getColourPriority(x.colour);
    };

    // 如果你用controllerAs语法（更现代的写法）
    // const vm = this;
    // vm.colourOrder = function(x) {
    //   return ColourOrderService.getColourPriority(x.colour);
    // };
  });

3. HTML里的用法不变 #

还是用原来的orderBy语法：

<!-- 用$scope的情况 -->
ng-repeat="x in data | orderBy : colourOrder"

<!-- 用controllerAs的情况（假设控制器别名是vm） -->
ng-repeat="x in vm.data | orderBy : vm.colourOrder"

额外优化小提示 #

我把你原来的switch换成了对象映射，这样以后要新增颜色排序规则，直接在映射里加键值对就行，不用改一堆case，代码可读性和维护性都更高～

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