113

我有一组根据用户选择的选项显示特定数字的图块。我现在想按显示的任何数字实现排序。

下面的代码显示了我是如何实现它的（通过在父卡范围内获取/设置一个值）。现在，因为 orderBy 函数需要一个字符串，所以我尝试在卡片范围内设置一个名为 curOptionValue 的变量并按此进行排序，但它似乎不起作用。

那么问题就变成了，如何创建自定义排序功能？

<div ng-controller="aggViewport" >
<div class="btn-group" >
    <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
    <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
        <table width="100%">
            <tr>
                <td align="center">
                    <h4>{{card.name}}</h4>
                </td>
            </tr>
            <tr>
                <td align="center"><h2>{{getOption()}}</h2></td>
            </tr>
        </table>        
    </div>
</div>

和控制器：

module.controller('aggViewport',['$scope','$location',function($scope,$location) {
    $scope.cards = [
        {name: card1, values: {opt1: 9, opt2: 10}},
        {name: card1, values: {opt1: 9, opt2: 10}}
    ];

    $scope.option = "opt1";

    $scope.setOption = function(val){
        $scope.option = val;
    }

}]);

module.controller('aggCardController',['$scope',function($scope){
    $scope.getOption = function(){
        return $scope.card.values[$scope.option];
    }
}]);
4

4 回答 4

192

实际上，orderBy过滤器不仅可以将字符串作为参数，还可以将函数作为参数。来自orderBy文档：https ://docs.angularjs.org/api/ng/filter/orderBy ）：

功能：吸气剂功能。此函数的结果将使用 <、=、> 运算符进行排序。

因此，您可以编写自己的函数。例如，如果您想根据 opt1 和 opt2 的总和来比较卡片（我正在编造这个，重点是您可以拥有任意函数），您可以在控制器中编写：

$scope.myValueFunction = function(card) {
   return card.values.opt1 + card.values.opt2;
};

然后，在您的模板中：

ng-repeat="card in cards | orderBy:myValueFunction"

这是工作的jsFiddle

另一件值得注意的事情是，这orderBy只是AngularJS 过滤器的一个示例，因此如果您需要非常具体的排序行为，您可以编写自己的过滤器（尽管orderBy对于大多数用例来说应该足够了）。

于 2012-08-20T16:45:03.190 回答
26

公认的解决方案仅适用于数组，但不适用于对象或关联数组。不幸的是，由于 Angular 依赖于数组枚举的 JavaScript 实现，因此无法一致地控制对象属性的顺序。一些浏览器可能会按字典顺序遍历对象属性，但这不能保证。

例如，给定以下任务：

$scope.cards = {
  "card2": {
    values: {
      opt1: 9,
      opt2: 12
    }
  },
  "card1": {
    values: {
      opt1: 9,
      opt2: 11
    }
  }
};

并且指令<ul ng-repeat="(key, card) in cards | orderBy:myValueFunction">ng-repeat 可以在“card2”之前迭代“card1”，而不管排序顺序如何。

为了解决这个问题，我们可以创建一个自定义过滤器将对象转换为数组，然后在返回集合之前应用自定义排序函数。

myApp.filter('orderByValue', function () {
  // custom value function for sorting
  function myValueFunction(card) {
    return card.values.opt1 + card.values.opt2;
  }

  return function (obj) {
    var array = [];
    Object.keys(obj).forEach(function (key) {
      // inject key into each object so we can refer to it from the template
      obj[key].name = key;
      array.push(obj[key]);
    });
    // apply a custom sorting function
    array.sort(function (a, b) {
      return myValueFunction(b) - myValueFunction(a);
    });
    return array;
  };
});

我们不能与自定义过滤器一起迭代（键，值）对（因为数组的键是数字索引），因此应该更新模板以引用注入的键名。

<ul ng-repeat="card in cards | orderByValue">
    <li>{{card.name}} {{value(card)}}</li>
</ul>

这是一个在关联数组上使用自定义过滤器的工作小提琴：http: //jsfiddle.net/av1mLpqx/1/

参考：https ://github.com/angular/angular.js/issues/1286#issuecomment-22193332

于 2014-12-30T21:42:47.817 回答
7

以下链接非常好地解释了 Angular 中的过滤器。它展示了如何在 ng-repeat 中定义自定义排序逻辑。 http://toddmotto.com/everything-about-custom-filters-in-angular-js

对于具有属性的对象排序，这是我使用的代码：（请注意，此排序是标准的 JavaScript 排序方法，而不是特定于 angular）列名是要对其执行排序的属性的名称。

self.myArray.sort(function(itemA, itemB) {
    if (self.sortOrder === "ASC") {
        return itemA[columnName] > itemB[columnName];
    } else {
        return itemA[columnName] < itemB[columnName];
    }
});
于 2015-05-20T19:38:58.910 回答
0

要包含方向以及 orderBy 函数：

ng-repeat="card in cards | orderBy:myOrderbyFunction():defaultSortDirection"

在哪里

defaultSortDirection = 0; // 0 = Ascending, 1 = Descending
于 2018-10-22T22:36:19.340 回答