orderBy Angular 中的多个字段

IT技术 javascript angularjs sorting angularjs-ng-repeat angularjs-orderby
2021-01-19 11:21:16

如何在角度中同时使用多个字段进行排序?例如,先按组再按子组

$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
    {'group':2,'sub':11}];

我想将其显示为

组:子组

1 - 1

1 - 2

1 - 20

2 - 1

2 - 10

2 - 11

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />
6个回答

请看这个:

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
group 字段在 orderBy 列表中是否有优先权?
2021-03-17 11:21:16
@luchosrock,是的,正如预期的那样。使用提供的 jsfiddle 可以轻松确认提供的排序字段的排序优先级是从左到右。
2021-03-18 11:21:16
请注意,可选的 reverseOrder 参数不像表达式 param 那样支持数组,但您可以省略它,而是为每个数组项提供排序顺序,以便它们分别反转(或不反转)。示例: orderBy: ['group', '-sub'] 将以正常方式按组排序,然后按相反顺序按子排序。可以通过这种方式获得一些复杂的组合。
2021-03-25 11:21:16
orderBy:['-group','sub']用于按group相反顺序排序。
2021-04-01 11:21:16
我们通过给数组 items 一个布尔属性来模拟我们商店中的优先级,然后将其用作第一个选项。示例:orderBy: ['-featured', 'title'],这导致精选的真实项目位于顶部(按字母顺序),然​​后按字母顺序列出其余项目。
2021-04-10 11:21:16

如果您想对控制器内的多个字段进行排序,请使用此

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

另见https://docs.angularjs.org/api/ng/filter/orderBy

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

用户数组而不是多个 orderBY

可以通过在 angular 中使用“orderBy”过滤器来完成排序。

两种方式:1.从视图 2.从控制器

  1. 从视图

句法:

{{array | orderBy : expression : reverse}} 

例如:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. 从控制器

句法:

$filter.orderBy(array, expression, reverse);

例如:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);

有两种方法可以做 AngularJs 过滤器,一种是在 HTML 中使用 {{}},另一种是在实际的 JS 文件中......

您可以使用以下方法解决您的问题:

{{ Expression | orderBy : expression : reverse}}

如果你在 HTML 中使用它或使用类似的东西:

$filter('orderBy')(yourArray, yourExpression, reverse)

反转在最后是可选的,它接受一个布尔值,如果它是真的,它会为你反转数组,非常方便的方法来反转你的数组......

2021-04-12 11:21:16