通过Angular中的多个字段

2020/09/29 11:01 · javascript ·  · 0评论

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

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

请看这个:

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

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

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

$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

可以通过使用“ 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过滤器有2种方法,一种是在HTML中使用{{}},另一种是在实际JS文件中...

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

{{ Expression | orderBy : expression : reverse}}

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

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

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

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

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

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

本文地址:http://javascript.askforanswer.com/tongguoangularzhongdeduogeziduan.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!