如何使用动态排序依据在NG重复 [英] how to use a dynamic orderBy in a ng-repeat

问题描述

香港专业教育学院一直在阅读关于如何使用动态排序依据与NG重复，但我坚持。我与工作看起来像这样的对象：

ive been reading on how to use a dynamic orderby with a ng-repeat but i stuck. The object I am working with looks like this:

 {
    "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 /总）
我有一个BTN-I组要用于更改订单3复选框。目前仅在过滤器中的第一个是工作。

By default I need (desc) name,total loe, inventory(fut/vdl/mod/uc/fin/total) I have 3 checkboxes in a btn-group i want to use for changing the order. currently only the first one in the filter is working.

下面是一个工作plunker
plunker

here is a working 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包括它。

i just found a angular-filter module and included it in the punker in case someone believes that is a way to go.

推荐答案

有一个看这个的 plunker 。我修改/打扫code相当升技所以它更容易阅读。

Have a look into this plunker. I've modified/cleaned the code quite abit so it's easier to read.

到排序依据过滤器的参数被优先从左至右。这意味着，即使你指定多个属性排序上，并在第一的目标值是不一样的，第二个属性是不是在整理中。

The arguments to the orderBy filter are prioritised from left to right. Which means that even if you specify multiple properties to order on and the target value of the first property are not the same, the second property is not used in sorting.

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

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

只要不包括字段中的排序依据你不想使用排序;不包括他们作为一个降序排序。

Simply don't include the fields in the orderBy that you don't want to use to sort on; don't include them as a descending sort.

另外，你可能想看看进入类似 $范围。$观看而不是应用 NG-变化的HTML元素。保持你的模型状态控制器连接让视图适应它。

Also, you might want to take a look into something like $scope.$watch instead of applying ng-change on html elements. Keep your model state in the controller en let the view adjust to it.

希望这有助于。

干杯。

这篇关于如何使用动态排序依据在NG重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！