嵌套数据时的AngularJs表排序

AngularJs Table Sorting when Data is nested

本文关键字：排序 AngularJs 数据 嵌套      更新时间：2023-09-26

当我的数据是嵌套的，并且不是所有列都是对象的一级公民时，我如何在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/

我在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/

由于您需要根据其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>

最后，这里有一个排序函数，它使用$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/

相关文章：