Сортировка таблицы AngularJs, когда данные вложены

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> 

Наконец вот функция сортировки, которая тянет в выбранной опции с помощью $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/