Sortiertisch mit orderBy nicht wie erwartet funktioniert

Question

Ich brauche Tabellendaten zu sortieren, für die i orderBy Filter verwendet, und es wird von den letzten Zeile über Plunker Beispiel sortiert bekommen wird viel explanable

DEMO

html sein:

<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" 
     }] 
    }] 

Wenn wir auf rund klicken dann sollte es in absteigender Reihenfolge nach Bewertung sortieren, die nicht geschieht

Jede Hilfe ist willkommen

Answer 1

Sie müssten Ihre eigene Hand schreiben und benutze es mit orderBy. Etwas wie das.

$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; 
    } 
    } 

Und in Ihrem html,

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

Auch wegen der Struktur Ihrer Daten, dann würden Sie den Überblick über die runde Zahl zu halten haben, indem sie irgendwo auf dem Umfang zu speichern. Dies liegt daran, dass für jede Runde kein separates Feld vorhanden ist. Dies wird erreicht, indem die runde Zahl vorbei

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

Hier ist die aktualisierte Plnkr SortBy.

Dies setzt voraus, dass das Rating-Array nach Runden sortiert ist, um damit zu beginnen. Wenn das nicht der Fall ist, müssten Sie im Komparator Logik hinzufügen, um nach der runden Nummer zu suchen, nach der sortiert wurde.