在AngularJS中抽象过滤器`orderBy`函数答案

【问题标题】：Abstracting filter `orderBy` functions in AngularJS在AngularJS中抽象过滤器`orderBy`函数
【发布时间】：2018-01-14 14:11:05
【问题描述】：

所以为了让我们的代码尽可能干净，并且我假设为了防止污染全局命名空间，我必须将我的 ctrls 函数抽象到一个单独的文件中，但是我在抽象一个特定函数时遇到了麻烦，即按它们从 CSV 数组接收到的颜色排序我的小部件 div，红色优先，琥珀色第二等等。

需要抽象的函数

$scope.colourOrder = function (x) {
    switch (x.colour) {
        case "Red":
            return 1;
            break;
        case "Amber":
            return 2;
            break;
        case "Green":
            return 3;
            break;
    };

HTML

ng-repeat="x in data | orderBy : colourOrder"

所以目前这在 html 的相关 ctrl 中工作得非常好，我只是不知道如何抽象这个函数，然后将它回调到 Ctrl 中。

任何有关此过程如何工作的解释的帮助将不胜感激。

【问题讨论】：

创建自定义过滤器，这里有一些很好的信息scotch.io/tutorials/building-custom-angularjs-filters
谢谢 Ric 我会看看它是否有帮助
关键是您可以在任何地方重复使用过滤器，并在必要时对其进行单独测试。

标签： arrays angularjs angularjs-filter

【解决方案1】：

创建custom filter:

app.filter("orderByColour",function() {
    return function(xArray) {
        return xArray.sort((a,b) => colourOrder(a)-colourOrder(b));
    };
    function colourOrder(x) {
        switch (x.colour) {
            case "Red":
                return 1;
                break;
            case "Amber":
                return 2;
                break;
            case "Green":
                return 3;
                break;
            default:
                return 0;
        };
    }
})

用法：

<table>
  <tr ng-repeat="x in friends | orderByColour">
    <td>{{x.name}}</td>
    <td>{{x.phone}}</td>
    <td>{{x.colour}}</td>
  </tr>
</table>

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope) {
    $scope.friends = [
        {name: 'John',   phone: '555-1212',  colour: 'Red'},
        {name: 'Mary',   phone: '555-9876',  colour: 'Green'},
        {name: 'Mike',   phone: '555-4321',  colour: 'Amber'},
        {name: 'Adam',   phone: '555-5678',  colour: 'Blue'},
        {name: 'Julie',  phone: '555-8765',  colour: 'Green'},
    ];
})
.filter("orderByColour",function() {
    return function(xArray) {
        return xArray.sort((a,b) => colourOrder(a)-colourOrder(b));
    };
    function colourOrder(x) {
        switch (x.colour) {
            case "Red":
                return 1;
                break;
            case "Amber":
                return 2;
                break;
            case "Green":
                return 3;
                break;
            default:
                return 0;
        };
    }
})

  <script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <table>
      <tr ng-repeat="x in friends | orderByColour">
        <td>{{x.name}}</td>
        <td>{{x.phone}}</td>
        <td>{{x.colour}}</td>
      </tr>
    </table>
  </body>

【讨论】：