angularjs orderBy具有多个功能，如何反转? [英] angularjs orderBy with multiple functions, how to reverse?

问题描述

我对一组对象进行了ng-repeat迭代，该对象需要一些函数来提取要排序的值.

I have an ng-repeat iterating over a set of objects that requires some functions to extract the values I want to sort by.

我的ng-repeat看起来像这样:

My ng-repeat looks like this:

ng-repeat="row in rows | orderBy: [sortFnOne, sortFnTwo, ...]"

我遇到的麻烦是希望将sortFnOne撤消.这些正在提取我无法使用简单属性访问的字符串，因为它正在对数据进行某种转换以生成这些值，这些值是我尝试排序的依据.

What I am having trouble with, is I would like sortFnOne to be reversed. These are extracting strings that I can't access using simple attributes as it's doing some conversion on the data to produce these values that I am trying to sort by.

如果这很简单，我知道我会做的:

If it were simple I know I would just do:

ng-repeat="row in rows | orderBy: ['-id', 'name', '-status', ...]"

如果这些函数只是返回布尔值，我就可以！返回值以获得我想要的结果，但是其中一些返回字符串，而某些则返回YYYY-MM-DD格式的日期.

If these functions were just returning booleans I could just ! the return value to get the result I wanted, but some of these are returning strings, and some are returning dates in the YYYY-MM-DD format.

推荐答案

Angular允许您提供比较器函数作为orderBy的第三个参数.该比较器功能使您可以指定自己的顺序.

Angular allows you to provide a comparator function as the third argument to orderBy. This comparator function gives you the power to specify your own ordering.

这是 Plunk ，它演示了动态复杂排序.它从一个JSON文件中加载100条记录，并且最初首先按姓氏，然后按名字对名称进行排序.当您按姓氏"以外的其他内容排序时，它会使用姓氏"和名字"来打破联系.但是，尽管主字段上的排序顺序可以颠倒，但演示的示例仍将按姓氏和姓氏升序排序.

Here is a Plunk that demonstrates dynamic complex sorting. It loads 100 records from a JSON file and originally sorts the names first by Last Name, then by First Name. When you sort by something other than Last Name, it uses Last Name and First Name to break ties. However, while the sort order on the primary field may be reversed, the example demonstrated will still sort Last Name and First name in ascending order.

$scope.compareData = function(left, right) {
  function compareValues(valueLeft, valueRight) {
    var valueReturn;
    if (!isNaN(parseInt(valueLeft)) && !isNaN(parseInt(valueRight))) {
      valueReturn =
        ((valueLeft * 1) < (valueRight * 1)
        ? -1
        : ((valueLeft * 1) > (valueRight * 1) ? 1 : 0));
    } else {
      valueReturn = valueLeft.toString().localeCompare(valueRight.toString());
    }
    return valueReturn;
  }
  var dataReturn = 0;
  if (typeof right === "undefined") {
    dataReturn = 1;
  } else if (typeof left === "undefined") {
    dataReturn = -1;
  } else {
    var valuesLeft = left.value.split(",");
    var valuesRight = right.value.split(",");
    for (var i = 0; (i < valuesLeft.length) && (dataReturn === 0); ++i) {
      dataReturn = compareValues(valuesLeft[i], valuesRight[i]);
      dataReturn *= ($scope.sortReverse && (i > 0)) ? -1 : 1;
    }
  }
  return dataReturn;
}

以上是链接的Plunk中用于比较器的功能.最后请注意，反转字段的排序就像将结果乘以-1一样简单.

The above is the function used for the comparator in the linked Plunk. Note at the end that reversing the sort on a field is as simple as multiplying the result by -1.

这篇关于angularjs orderBy具有多个功能，如何反转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！