使用嵌套数组进行角度排序

时间:2014-08-07 15:03:57

标签: angularjs sorting angularjs-ng-repeat

我一直试图找到一个答案并且一直无法这样做。我想知道是否有人知道如何在不使用第三方工具的情况下对ng-repeat中的以下数据(members属性)进行排序。

$scope.element = {
    'sortOrder' : '[0].value' // <-- what is wrong? =[
    'members': [
        [
            { 'name' : 'a', 'value' : 'some' },
            { 'name' : 'b', 'value' : 'value' },
            { 'name' : 'c', 'value' : 'another' },
            { 'name' : 'd', 'value' : 'value' }
        ],
        [
            { 'name' : 'a', 'value' : 'other' },
            { 'name' : 'b', 'value' : 'stuff' },
            { 'name' : 'c', 'value' : 'cats' },
            { 'name' : 'd', 'value' : 'reddit' }
        ],
        [
            { 'name' : 'a', 'value' : 'internets' },
            { 'name' : 'b', 'value' : 'bigdata' },
            { 'name' : 'c', 'value' : 'winwin' },
            { 'name' : 'd', 'value' : 'himom' }
        ]
    ]
}

因此,上述数据基本上代表了一个表。由于各种原因,数据无法重组。现在我有以下作为我的标记:

<table class="table">
    <thead>
        <tr>
            <th ng-repeat="key in element.members[0]">
                <a href="#" ng-click="element.sortOrder = '[' + $index + ']' + '.value'">{{ key.name }}</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="subelement in element.members | orderBy : element.sortOrder">
            <td ng-repeat="element in subelement" ng-include src="template(element, true)">
            </td>
        </tr>
    </tbody>
</table>

sortOrder属性看起来......它可能是正确的?我查看了其他人们必须做这种事情的例子(他们使用的是命名属性而不是索引)我认为我可能会到达某个地方,但无济于事。

任何启蒙的话都会受到赞赏。谢谢!

1 个答案:

答案 0 :(得分:1)

您不能将[0].valueorderBy一起使用,与orderBy一起使用的字符串应该是您要排序的对象的属性。在您的情况下,您希望对数组数组进行排序,但[0].value不是数组的属性,因此您的方法不起作用。

但是,orderBy可以使用“Getter”函数从您正在排序的对象中获取值,因此您可以按照以下方式使用它:

控制器:

$scope.element = {
    sortOrder: -1, // sortOrder is the index, -1 = unsorted
    members: [...]
};

$scope.getValue = function(member) {
    if ($scope.element.sortOrder < 0) {
        return null; // keep members being unsorted
    }
    return member[$scope.element.sortOrder].value;
};

模板:

<table class="table">
    <thead>
        <tr>
            <th ng-repeat="key in element.members[0]">
                <a href="#" ng-click="element.sortOrder = $index">{{ key.name }}</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="subelement in element.members | orderBy : getValue">
            <td ng-repeat="element in subelement" ng-include src="template(element, true)">
            </td>
        </tr>
    </tbody>
</table>

以下是您可以使用的工作内容:http://plnkr.co/edit/bebYBCoa6zptOHNLVL9X