使用 orderBy 的表格排序未按预期工作

Question

我需要对使用 orderBy 过滤器的表数据进行排序，并且它是从上面的最后一行排序的 plunker 的例子很容易解释

DEMO

html:

<table class="friends">
  <thead>
    <tr class='table-head'>
      <th scope="col">Candidate Name</th>
      <th scope="col" ng-repeat="a in [1,2,3,4]" ng-click="sortBy('candidateData.rating')"><a style="cursor:pointer">Round{{a}}</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="candidate in aCandidateDetails| orderBy:propertyName:reverse">
      <td>
        <div>{{candidate.name}}</div>
      </td>
      <td ng-repeat="candidateData in candidate.ratings">
        <div ng-if="candidateData.rating">
          {{candidateData.rating}}
        </div>
        <span ng-if="!candidateData.rating">    - NA -   </span> </td>
      <td data-title="Status">
        <div>{{candidate.interviewStatus}}</div>
      </td>
      <td><a href="" ng-model='candidate' ng-click="fnCandidateFeedbackDetails(candidate.uniqueId,candidate._id)"><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
    </tr>
  </tbody>
</table>

Js：

$scope.propertyName = 'name';
  $scope.reverse = true;
  $scope.sortBy = function(propertyName) {
    $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
    $scope.propertyName = propertyName;
  };

json：

$scope.aCandidateDetails = [{
    name: "a",
    ratings: [{
        round: 1,
        rating: 3,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      },

      {
        round: 2,
        rating: 5,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 3,
        rating: 4,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 4,
        rating: 1,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }
    ]
  }, {
    name: "b",
    ratings: [{
        round: 1,
        rating: 5,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      },

      {
        round: 2,
        rating: 4,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 3,
        rating: 3,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 4,
        rating: 2,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }
    ]
  },{
    name:"c",
    ratings: [{
        round: 1,
        rating: 1,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      },

      {
        round: 2,
        rating: 1,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 3,
        rating: 1,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }, {
        round: 4,
        rating: 1,
        feedback: "something",
        interviewer: "abc",
        roundStatus: "selected"
      }]
  }]

如果我们点击轮次，那么它应该根据评级按降序排序，这不会发生

感谢任何帮助

Answer 1

您必须编写自己的比较器并将其与 orderBy 一起使用。像这样的。

$scope.ratingComparator = function(v1, v2) {
    if (v1.type === 'object') {
      var obj1 = $scope.aCandidateDetails[v1.index];
      var obj2 = $scope.aCandidateDetails[v2.index];
      return (obj1.ratings[$scope.sortRound].rating < obj2.ratings[$scope.sortRound].rating)? -1: 1;
    } else {
      return 1;
    }
  }

在你的 html 中，

<tr ng-repeat="candidate in aCandidateDetails| orderBy:propertyName:reverse:ratingComparator">

此外，由于数据的结构，您必须通过将其存储在示波器上的某个位置来跟踪整数。这是因为每一轮都没有单独的字段。这是通过将整数传递给 sortBy 来完成的

<th scope="col" ng-repeat="a in [1,2,3,4]" ng-click="sortBy('ratings', a)"><a style="cursor:pointer">Round{{a}}</a></th>

这是更新的 Plnkr.

这假设 Ratings 数组是按整数排序的。如果不是这种情况，则必须在比较器中添加逻辑以搜索排序的整数。