AngularJS 按属性排序 [英] AngularJS sorting by property

问题描述

我想做的是按属性对一些数据进行排序.这是我认为应该工作但没有的示例.

HTML 部分:

<div ng-controller="控制器"><ul><li ng-repeat="(key, value) in testData | orderBy:'value.order'">{{value.order}}.{{key}} ->{{value.name}}

JS部分:

var myApp = angular.module('myApp', []);myApp.controller('controller', ['$scope', function ($scope) {$scope.testData = {C: {name:"CData", order: 1},B: {name:"BData", order: 2},A: {name:"AData", order: 3},}}]);

结果:

<块引用>

3. A -> AData
4. B -> BData
5. C -> CData

...恕我直言应该是这样的:

<块引用>

1. C -> CData
2. B -> BData
3. A -> AData

我错过了什么吗(这里已经准备好 JSFiddle 进行实验)?

解决方案

AngularJS 的 orderBy 过滤器只支持数组 - 没有对象.所以你必须写一个自己的小过滤器，为你做排序.

或者更改您处理的数据格式(如果您对此有影响).包含对象的数组可按本机 orderBy 过滤器排序.

这是我用于 AngularJS 的 orderObjectBy 过滤器:

app.filter('orderObjectBy', function(){返回函数(输入，属性){if (!angular.isObject(input)) 返回输入；var 数组 = [];for(var objectKey in input) {array.push(input[objectKey]);}数组排序(函数(a，b){a = parseInt(a[属性]);b = parseInt(b[属性]);返回 a - b;});返回数组；}});

在您的视图中的用法:

//...

在这个例子中对象需要一个位置属性，但你可以灵活地使用对象中的任何属性(包含一个整数)，只是根据定义在视图中.

示例 JSON:

<代码>{"123": {"name": "Test B", "position": "2"},456":{名称":测试A"，位置":1"}}

这是一个向您展示用法的小提琴:http://jsfiddle.net/4tkj8/1/

What I am trying to do is sort some data by property. Here is example that I tought should work but it doesn't.

HTML part:

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="(key, value) in testData | orderBy:'value.order'">
            {{value.order}}. {{key}} -> {{value.name}}
        </li>
    </ul>
    </div>
</div>

JS part:

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

myApp.controller('controller', ['$scope', function ($scope) {

    $scope.testData = {
        C: {name:"CData", order: 1},
        B: {name:"BData", order: 2},
        A: {name:"AData", order: 3},
    }

}]);

And the result:

3. A -> AData
4. B -> BData
5. C -> CData

... that IMHO should look like this:

1. C -> CData
2. B -> BData
3. A -> AData

Did I miss something (here is ready JSFiddle to experiment on)?

解决方案

AngularJS' orderBy filter does just support arrays - no objects. So you have to write an own small filter, which does the sorting for you.

Or change the format of data you handle with (if you have influence on that). An array containing objects is sortable by native orderBy filter.

Here is my orderObjectBy filter for AngularJS:

app.filter('orderObjectBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });
    return array;
 }
});

Usage in your view:

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
    //...
</div>

The object needs in this example a position attribute, but you have the flexibility to use any attribute in objects (containing an integer), just by definition in view.

Example JSON:

{
    "123": {"name": "Test B", "position": "2"},
    "456": {"name": "Test A", "position": "1"}
}

Here is a fiddle which shows you the usage: http://jsfiddle.net/4tkj8/1/

这篇关于AngularJS 按属性排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！