通过Angular中的多个字段


382

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

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

Answers:


659

请看这个:

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

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

137
orderBy:['-group','sub']group相反的顺序排序。
德米特里(Dmitriy)2014年

1
组字段是否具有在orderBy列表中排在第一位的优先级?
luchosrock 2014年

5
@luchosrock,是的,确实如预期。使用提供的jsfiddle可以轻松地确认提供的排序字段的排序优先级是从左到右。
Patrick Refondini 2015年

2
请注意,可选的reverseOrder参数不像表达式param那样支持数组,但是您可以忽略它,而是在每个数组项上提供排序顺序,以便分别反转(或不反转)它们。示例:orderBy:['group','-sub']将以常规方式按组排序,然后按相反的顺序按sub排序。这样可以得到一些复杂的组合。
丹尼尔·纳尔巴赫

1
我们在商店中模拟了优先级,方法是为数组项提供布尔属性,然后将其用作第一个选项。示例:orderBy:['-featured','title'],这会使精选的真实商品位于顶部(按字母顺序),然​​后其余商品按字母顺序列出。
丹尼尔·纳尔巴赫


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

用户数组而不是多个orderBY


5

排序可以通过在角度使用'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);

5

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

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

{{ Expression | orderBy : expression : reverse}}

如果您在HTML中使用它或使用类似以下内容:

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

最后,reverse是可选的,它接受一个布尔值,如果为true,它将为您反转Array,这是一种非常方便的方式来反转Array ...



0

我写了这个方便的文章来按对象的多个列/属性进行排序。每次连续单击列,代码都会存储最后单击的列,并将其添加到不断增加的单击列字符串名称列表中,并将它们放置在名为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>

0

创建用于排序的管道。接受字符串和字符串数组,并按多个值排序。适用于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
            }
        });
    }
}

1
PS:实际上,我认为目前还没有人回答实际问题,因为这是针对Angular而不是AngularJS的。我的解决方案从Angular 2开始工作。在Angular 7.2.15上进行了测试
Andris

您应该考虑a)什么时候提出这个问题,以及b)何时首次宣布Angular 2。
尼克,

@andris您是否在某个地方托管了工作端到端的代码示例?
滚石

抱歉,但没有:(
Andris

-8

确保最终用户的分类不会太复杂。我一直认为按组和子组进行排序有点难以理解。如果是技术最终用户,则可以。


这甚至都不是一个相关的“评论”。当然不能回答这个问题
Afshin Moazami '17

在进行GUI开发时问自己当前的方法是否是最好的方法,这是如此错误吗?最终用户体验对我来说很重要
Jens Alenius

在许多情况下,按多个属性进行排序使用户更容易理解组织。您实际上是将事物分组。
欧文·约翰逊
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.