Question

我有这个列表，我想在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 (header)
       Perancangan Sektor 
       Pengurusan Pengguna dan Peranan

这是掠夺者 http://plnkr.co/edit/77t5id3WOmbl2GSqYKh2?p=preview

Answer 1

似乎至少有两种方法可以实现这一目标。第一个可能更简单，但绕过你提出的问题。将列表[]按到为该表视图量身定制的扁平和简化的阵列中。然后你将对该数组进行ng重复。

这实际上是一个躲闪，完全避免了你的问题。更直接的问题是你可以尝试使用嵌套的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;
};
});

对嵌套值进行Ng-Table ng-repeat

1 个答案: