orderBy Angular 中的多个字段

Posted 2023-02-22

【中文标题】orderBy Angular 中的多个字段

【英文标题】：orderBy multiple fields in Angular

【发布时间】：2013-06-06 21:56:20

【问题描述】：

如何在角度中同时使用多个字段进行排序？先分组再分组 举例

$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'" />

【参考方案1】：

为排序创建了管道。接受字符串和字符串数组，按多个值排序。适用于 Angular（不是 AngularJS）。支持字符串和数字的排序。

@Pipe(name: 'orderBy')
export class OrderBy implements PipeTransform 
    transform(array: any[], filter: any): any[] 
        if(typeof filter === 'string') 
            return this.sortAray(array, filter)
         else 
            for (var i = filter.length -1; i >= 0; i--) 
                array = this.sortAray(array, filter[i]);
            

            return array;
        
    

    private sortAray(array, field) 
        return array.sort((a, b) => 
            if(typeof a[field] !== 'string') 
                a[field] !== b[field] ? a[field] < b[field] ? -1 : 1 : 0
             else 
                a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0
            
        );
    

【讨论】：

PS：实际上，在我看来，目前没有人回答实际问题，因为它是针对 Angular 而不是 AngularJS。我的解决方案从 Angular 2 开始工作。在 Angular 7.2.15 上测试

您应该考虑 a) 何时提出此问题，以及 b) Angular 2 何时首次发布。

@andris 你有托管在某个地方的端到端代码示例吗？

抱歉，没有:(

【参考方案2】：

我写了这篇方便的文章来按对象的多个列/属性进行排序。每次连续单击列时，代码都会存储最后单击的列，并将其添加到不断增长的单击列字符串名称列表中，并将它们放置在名为 sortArray 的数组中。内置的 Angular “orderBy”过滤器只是读取 sortArray 列表并按照存储在其中的列名的顺序对列进行排序。所以最后点击的列名成为主要的有序过滤器，前一个优先点击下一个，等等。反向顺序会立即影响所有列的顺序，并为整个数组列表集切换升序/降序：

<script>
    app.controller('myCtrl', function ($scope) 
        $scope.sortArray = ['name'];
        $scope.sortReverse1 = false;
        $scope.searchProperty1 = '';
        $scope.addSort = function (x) 
            if ($scope.sortArray.indexOf(x) === -1) 
                $scope.sortArray.splice(0,0,x);//add to front
            
            else 
                $scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
                $scope.sortArray.splice(0, 0, x);//add to front again
            
        ;
        $scope.sushi = [
         name: 'Cali Roll', fish: 'Crab', tastiness: 2 ,
         name: 'Philly', fish: 'Tuna', tastiness: 2 ,
         name: 'Tiger', fish: 'Eel', tastiness: 7 ,
         name: 'Rainbow', fish: 'Variety', tastiness: 6 ,
         name: 'Salmon', fish: 'Misc', tastiness: 2 
        ];
    );
</script>
<table style="border: 2px solid #000;">
<thead>
    <tr>
        <td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
        <td> s.name </td>
        <td> s.fish </td>
        <td> s.tastiness </td>
    </tr>
</tbody>
</table>

【参考方案3】：

AngularJs 过滤器有两种方法，一种在 html 中使用 ，另一种在实际 JS 文件中...

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

 Expression | orderBy : expression : reverse

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

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

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

【讨论】：

也在这里看看：docs.angularjs.org/api/ng/filter/orderBy

【参考方案4】：

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

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

从视图

语法：

array | orderBy : expression : reverse 

例如：

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">user.name</div>

来自控制器

语法：

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

例如：

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

【参考方案5】：

确保排序对最终用户来说不会太复杂。我一直认为按组和子组排序有点难以理解。如果它是技术最终用户，它可能没问题。

【讨论】：

这甚至不是相关的“评论”。肯定不是问题的答案

当您进行 GUI 开发时，问自己当前的方法是否是最好的，是不是错了？最终用户体验与我息息相关

在很多场景中，通过多个属性进行排序可以让用户更容易理解组织。您实际上是在将事物分组。

【参考方案6】：

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

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

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

【参考方案7】：

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

用户数组而不是多个orderBY

【参考方案8】：

请看这个：

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

<div ng-repeat="division in divisions | orderBy:['group','sub']">division.group-division.sub</div>

【讨论】：

orderBy:['-group','sub'] 按group 倒序排序。

group字段在orderBy List中是否有优先权？

@luchosrock，是的，正如预期的那样。使用提供的 jsfiddle 可以轻松确认提供的排序字段的排序优先级是从左到右。

请注意，可选的 reverseOrder 参数不支持像表达式参数那样的数组，但您可以省略它，而是为每个数组项提供排序顺序，以便它们分别反转（或不反转）。示例： orderBy: ['group', '-sub'] 将以正常方式按组排序，然后按相反顺序按子排序。这样可以得到一些复杂的组合。

我们通过给数组 items 一个布尔属性来模拟商店中的优先级，然后将其用作第一个选项。示例：orderBy: ['-featured', 'title']，这导致精选的真实项目位于顶部（按字母顺序），然​​后按字母顺序列出其余项目。