Angular中具有未定义值的自定义过滤器答案

【问题标题】：Custom filter in Angular with undefined valuesAngular中具有未定义值的自定义过滤器
【发布时间】：2015-04-01 18:55:18
【问题描述】：

我在 Angular 中有一组对象，我试图以一种非常具体的方式对其进行排序，但我无法弄清楚。

这里是示例 Javascript：

var app = angular.module('app', []);

function Ctrl($scope) {
  $scope.divisions = [      
      {'group':'d','sub':1}, 
      {'group':'a'}, 
      {'group':'z','sub':2},
      {'group':'g','sub':20},
      {'group':'g'},
      {'group':'r','sub':11}];
}

这里是 HTML 示例：

<div class="test" ng-controller="Ctrl">
  <div ng-repeat="division in divisions | orderBy:['sub','group']">{{division.group}}-{{division.sub}}</div>
<div>

这是小提琴：https://jsfiddle.net/r4nsyp2v/1/

而不是显示如下：

d-1
z-2
r-11
g-20
a-
g-

我希望它显示如下：

g-20
r-11
z-2
d-1
a-
g-

因此，如果存在，我想从最大到最小显示“子”键，之后是未定义的“子”键。并按组按字母顺序显示具有未定义“子”键的对象。

我还没有找到诀窍....有什么想法吗？

【问题讨论】：

试试orderBy:['-sub','group']
我想我可以将数组拆分为两个不同的数组（一个定义了“sub”，一个没有定义），对它们进行排序，然后将它们重新组合在一起。不过，似乎应该有一种更清洁的方式。
执行'-sub'后使用过滤器：stackoverflow.com/questions/18604374/…

标签： angularjs filter angularjs-orderby

【解决方案1】：

您可以像这样创建您的自定义订单：

$scope.order = function(division) {
  return -(division.sub || 0);
}

在 HTML 中

<div ng-repeat="division in divisions | orderBy:order">

参见示例https://jsfiddle.net/r4nsyp2v/2/

【讨论】：