如何在ng-repeat中使用动态orderBy

时间:2015-12-19 15:32:20

标签: javascript angularjs angular-filters angularjs-orderby

我一直在阅读如何使用ng-repeat动态命令,但我卡住了。我正在使用的对象如下所示:

 {
    "type": "Active",
    "properties": {
        "id": 105935,
        "name": "Museum Hill Estates",
        "show": false,
        "territoryId": 1996
    },
    "metrics": {
        "bld": {
            "type": "Unknown",
            "count": {
                "prod": 78,
                "custom": 90
            }
        },
        "inv": {
            "fut": 9,
            "vdl": 6,
            "mod": 1,
            "fin": 3,
            "uc": 3,
            "total": 22
        },
        "loe": {
            "bld": 11,
            "inv": 20,
            "size": 3,
            "activity": 9,
            "total": 43
        }
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            -105.93069,
            35.65802
        ]
    }
}

默认我需要(desc)名称,总loe,库存(fut / vdl / mod / uc / fin / total) 我在btn-group中有3个复选框,我想用它来更改订单。目前只有过滤器中的第一个正在工作。

这是一个工作的plunker plunker

 vm.sortByName = 'properties.name';
    vm.sortByLoeTotal = 'metrics.loe.total';
    vm.sortByInv = ['metrics.inv.fut','metrics.inv.vdl','metrics.inv.mod','metrics.inv.uc','metrics.inv.fin','metrics.inv.total'];

    vm.setSubdivisionSorting = function (filter) {
        if (filter === 'loe' && vm.loeFilter === true) {
            vm.sortByLoeTotal = 'metrics.loe.total';
            vm.loeFilter = false;
        }
        if (filter === 'loe' && vm.loeFilter === false) {
            vm.sortByLoeTotal = '-metrics.loe.total';
            vm.loeFilter = true;
        }
        if (filter === 'inventory' && vm.inventoryFilter === true) {
           vm.sortByInv = ['metrics.inv.fut', 'metrics.inv.vdl', 'metrics.inv.mod', 'metrics.inv.uc', 'metrics.inv.fin', 'metrics.inv.total'];
           vm.inventoryFilter = false;
        }
        if (filter === 'inventory' && vm.inventoryFilter === false) {
           vm.sortByInv = ['-metrics.inv.fut', '-metrics.inv.vdl', '-metrics.inv.mod', '-metrics.inv.uc', '-metrics.inv.fin', '-metrics.inv.total'];
           vm.inventoryFilter = true;
        }
        if (filter === 'subdivision' && vm.subdivisionFilter === true) {
            vm.sortByName = 'properties.name';
            vm.subdivisionFilter = false;
        }
        if (filter === 'subdivision' && vm.subdivisionFilter === false) {
            vm.sortByName = '-properties.name';
            vm.subdivisionFilter = true;
        }
    };

我刚刚发现了一个角度过滤器模块,并将其包含在punker中,以防有人认为这是一种方法。

1 个答案:

答案 0 :(得分:3)

查看此plunker。我已经修改/清理了代码,因此更容易阅读。

orderBy过滤器的参数从左到右排列优先顺序。这意味着即使您指定了多个要排序的属性并且第一个属性的目标值不相同,第二个属性也不会用于排序。

var orderBy = ['name', 'age'];

var data = [{
 name: 'Foo',
 age: 102
}, {
 name: 'Bar',
 age: 99999 // <-- not used in sorting since the name property differs
}];

只是不要在orderBy中包含您不想用于排序的字段;不要将它们作为降序排列。

此外,您可能需要查看$scope.$watch之类的内容,而不是在html元素上应用ng-change。保持模型状态在控制器中,让视图调整到它。

希望这有帮助。

干杯。