我有这个清单,想在ng-table上显示。

$scope.list = [
    {
        "moduleId": 1,
        "name": "Perancangan",
        "level": 0,
        "childs": [
            {
                "moduleId": 12,
                "name": "Perancangan Sektor",
                "level": 1,
                "childs": [],
                "links": [
                    {
                        "rel": "self",
                        "href": "http://103.8.160.34/mrf/modules/1"
                    }
                ]
            }
        ]
    },
    {
        "moduleId": 2,
        "name": "Pengurusan Pengguna dan Peranan",
        "level": 0,
        "childs": [
            {
                "moduleId": 17,
                "name": "Pengurusan Pengguna",
                "level": 1,
                "childs": [],
                "links": []
            },
            {
                "moduleId": 18,
                "name": "Operasi Peranan",
                "level": 1,
                "childs": [],
                "links": []
            }
        ],
        "links": [
            {
                "rel": "self",
                "href": "http://103.8.160.34/mrf/modules/2"
            }
        ]
    }
];


我希望list.childs是表中具有list.name作为分组的行,我曾用ng-repeat来工作,但不起作用。我最能做的就是将其显示为td。我正在看的是
        
    Perancangan(标头)
       Perancangan Sektor
       蓬古鲁桑·彭古纳·丹·佩拉南
    
    

这是the子
http://plnkr.co/edit/77t5id3WOmbl2GSqYKh2?p=preview

最佳答案

您似乎至少有两种方法可以完成此操作。第一个可能更简单,但是可以避免您提出的问题。将list []按摩成适合此表视图的扁平化简化数组。然后,您将对该数组执行ng-repeat。

但这确实是躲闪,并且完全避免了您的问题。对于您的问题,更直接的是,您可以尝试使用嵌套的ng-repeat,但是这些操作非常棘手。参见:http://vanderwijk.info/blog/nesting-ng-repeat-start/

最后,似乎最能解决您的意图和精神问题的方法是使用自定义过滤器。我写了一个example fiddle应该证明这个想法。

app.filter('flatten', function() {

// Because this filter is to be used for an ng-repeat the filter function
// must return a function which accepts an entire list and then returns
// a list of filtered items.
return function(listItems) {
    var i,j;
    var item, child;
    var newItem;
    var flatList = [];

    // Begin a loop over the entire list of items provided by ng-repeat
    for (i=0; i<listItems.length; i++) {
        var item = listItems[i];

        // Construct a new object which contains just the information needed
        // to display the table in the desired way. This means we just extract
        // the list item's name and level properties
        newItem = {};
        newItem.name = item.name.toUpperCase();
        newItem.level = item.level;

        // Push the level 0 item onto the flattened array
        flatList.push(newItem);

        // Now loop over the children. Note that this could be recursive
        // but the example you provided only had children and no grandchildren
        for (j=0; j<item.childs.length; j++) {
            child = item.childs[j];

            // Again create a new object for the child's data to display in
            // the table. It also has just the name and level.
            newItem = {};
            newItem.name = child.name;
            newItem.level = child.level;

            flatList.push(newItem);
        }
    }

    // Return the newly generated array that contains the data which ng-repeat
    // will iterate over.
    return flatList;
};
});

关于javascript - Ng-table ng-repeat嵌套值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27263807/

10-12 12:17
查看更多