Question

当我的数据嵌套并且并非所有列都是对象的第一级公民时，如何处理angularjs中的表排序。

数据（摘录）

[
    {
        "name": "Team A",
        "categories": [
            {
                "label": "FG%",
                "value": 4676,
                "points": 7
            },
            {
                "label": "FT%",
                "value": 8387,
                "points": 9
            }
        ]
    }, {
        "name": "Team B",
        "categories": [
            {
                "label": "FG%",
                "value": 5285,
                "points": 10
            },
            {
                "label": "FT%",
                "value": 6111,
                "points": 1
            }
        ]
    }
]

HTML

<div ng-controller="mainCtrl">
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th ng:click="changeSorting('name')">Name</th>
                <th ng:click="changeSorting('name')">Points</th>
                <th ng:click="changeSorting(value.label)" ng-repeat="(index, value) in data.teams[0].categories">{{value.label}}</th>

            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="team in data.teams | orderBy:sort.column:sort.descending ">
                <td>{{team.name}}</td>
                <td>{{team.totalPoints}}</td>
                <td ng-repeat="(name, cat) in team.categories">
                    {{cat.value}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

这是我发现的一种方法。无论如何，由于我的数据结构，我担心这不是正确的想法。

在控制器上排序

$scope.sort = {
    column: 'name',
    descending: false
};

$scope.changeSorting = function(column) {
    var sort = $scope.sort;
    if (sort.column == column) {
        sort.descending = !sort.descending;
    } else {
        sort.column = column;
        sort.descending = false;
    }
};

这是更新的小提琴：http://jsfiddle.net/SunnyRed/mTywq/2/

Answer 1

我根据http://docs.angularjs.org/api/ng.filter:orderBy

处的角度文档修改了您的代码

<强> HTML

<div ng-controller="mainCtrl">

    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th ng:click="predicate = 'name'; reverse = !reverse">Name</th>
                <th ng:click="predicate = 'totalPoints'; reverse = !reverse">Points</th>
                <th ng:click="toggleSort($index)" ng-repeat="category in data.teams[0].categories">{{category.label}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="team in data.teams | orderBy:predicate:reverse">
                <td>{{team.name}}</td>
                <td>{{team.totalPoints}}</td>
                <td ng-repeat="(name, cat) in team.categories">
                    {{cat.value}}
                </td>                    
            </tr>
        </tbody>
    </table>
</div>

排序部件

$scope.toggleSort = function(index){
    $scope.reverse = !$scope.reverse;
    $scope.predicate = function(team){
        return team.categories[index].points;
    }
}

这是小提琴：http://jsfiddle.net/mgalela/Br5Wb/14/

Answer 2

由于您需要根据label查找正确的类别，然后使用相关的value进行排序，我会创建自定义orderBy功能。

要使用新功能sortFunc，请在此处添加：

<tr ng-repeat="team in data.teams | orderBy: sortFunc ">

然后让用户选择选项：

<select ng-model="sortVal">
    <option value="name">Name</option>
    <option value="points">points</option>
    <option value="3PM">3PM</option>
    <option value="PTS">PTS</option>
 </select>

最后，这是sort函数，它使用$scope.sortVal提取所选选项，并返回orderBy的相应值进行排序。

$scope.sortFunc = function(val) {
    if ($scope.sortVal == 'name') {
         return(val.name);
     } else if ($scope.sortVal == 'points') {
         return(val.totalPoints);
     } else if ($scope.sortVal == '3PM' ||
                $scope.sortVal == 'PTS')  {  
         for (var i = 0; i < val.categories.length; i++) {
            category = val.categories[i];
            if (category.label == $scope.sortVal){
               return(category.value);
            }
         }
    }
}

以下是这项工作的小提琴：http://jsfiddle.net/mTywq/4/

嵌套数据时的AngularJs表排序

2 个答案: