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

Question

我一直在阅读如何将动态 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) 名称、总数量、库存(fut/vdl/mod/uc/fin/total) 我在一个 btn 组中有 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;
        }
    };

我刚刚找到了一个 angular-过滤器模块并将其包含在 punker 中以防有人认为这是一个可行的方法。

Answer 1

看看这个 plunker。我已经 modified/cleaned 编写了相当多的代码，因此更易于阅读。

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。将模型状态保存在控制器中，让视图适应它。

希望对您有所帮助。

干杯。

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

how to use a dynamic orderBy in a ng-repeat

javascript

angularjs

angular-filters

angularjs-orderby