具有排序和动态列的排名表

Question

我正在尝试做一个排名表：

我有一个对象scores，其中包含总分，每个“挑战”都包含与此挑战相关的分数。我的主要问题是遍历scores 为每个挑战创建一个th 标签并在之后对它们进行排序。

目标：

• 挑战的数量必须是动态的
• 按总数（完成）和挑战排序

我的问题：

• 如何将 ng-repeat 用于挑战数组
• 如何对这些进行排序

我的进步：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.sortType = 'points';
    $scope.sortReverse = false;
		$scope.scores = { 
      "6":{
        "total":5, 
        "challenges":{
          "1":{
        "challengeId":1},
      "2":{
        "point":2,
        "challengeId":2}
      }
    },
    "21":{
    "total":2, 
    "challenges":{
      "1":{
        "point":1,
        "challengeId":1},
      "2":{
        "point":1,
        "challengeId":2}
          }
        },
      }
}

myApp.filter('orderObjectBy', function() {
    return function(items, field, reverse) {
      var filtered = [];
      angular.forEach(items, function(item) {
        filtered.push(item);
      });
      filtered.sort(function (a, b) {
        return (a[field] > b[field] ? 1 : -1);
      });
      if(reverse) filtered.reverse();
      return filtered;
    };
  });

<div ng-controller="MyCtrl">
  <table>
      <tr>
        <th>Rank</th>
        <th>
          <span ng-click="toggleSort($index);sortReverse=false">+</span> 
          Total 
          <span ng-click="toggleSort($index);sortReverse=true">-</span>
        </th>
        <th ng-repeat="challenge in scores.challenges">
          <span ng-click="toggleSort($index);sortReverse=false">X</span> 
          Challenge n° 
          <span ng-click="toggleSort($index);sortReverse=true">Y</span>
        </th>
      </tr>
      <tbody ng-repeat="score in scores | orderObjectBy:sortType:sortReverse">
        <tr>
          <td>{{ $index+1 }}</td>
          <td>{{ score.total }}</td>
          <td ng-repeat="challenge in score.challenges">{{ challenge.point }}</td>
        </tr>
      </tbody>
    </table>
</div>

JSFiddle

谢谢！

Answer 1

我更新了小提琴。当您想按嵌套值排序时，这是您指定 orderString 的方式（在您的情况下，它将按特定的挑战 ID）：

$scope.orderType = "challenges."+challengeId+'.point';

我还添加了一个过滤器，用于转换数组中的对象：

.filter('orderObjectBy', function() {
  return function (items, field, reverse) {
    var filtered = [];

    angular.forEach(items, function(item, key) {
      item.key = key;
      filtered.push(item);
    });

    return filtered;
  };
});

那么你的 html 应该是这样的：

<tbody ng-repeat="score in scores| orderObjectBy | orderBy: orderType:sortReverse">
    <tr>
     <td>{{ $index+1 }}</td>
     <td>{{ score.total }}</td>
     <td ng-repeat="challenge in score.challenges">{{ challenge.point }}</td>
    </tr>
</tbody>

检查此工作示例：http://jsfiddle.net/Lvc0u55v/13564/