AngularJS Tabelle sortieren mit ng-repeat

Question

ich eine HTML-Tabelle und wollen meine Aufzeichnungen ($scope.records in ctrl) Header, indem Sie auf Tabelle ($scope.headers in ctrl) sortieren,

Kann mir jemand erklären, warum funktioniert das:

<th> 
    <a ng-click="sortColumn=headers[0];reverse=!reverse">{{ headers[0] }}</a> 
</th> 
<th> 
    <a ng-click="sortColumn=headers[1];reverse=!reverse">{{ headers[1] }}</a> 
</th> 

Und das nicht:

<th ng-repeat="header in headers"> 
    <a ng-click="sortColumn=headers[$index];reverse=!reverse">{{ headers[$index] }}</a> 
</th> 

Hier ist der Code für die Datensätze:

Ich habe 58 Spalten in meiner Tabelle wäre so viel besser eine Schleife durch die Tabellenköpfe ...

Answer 1

Als David schlug dies im Zusammenhang wahrscheinlich Umfang ist. Da ngRepeat einen neuen Bereich erstellt, setzt Ihre ngClick die sortColumn und reverse in einem eigenen untergeordneten Bereich für jede Spaltenüberschrift.

Ein Weg, um dies sicherzustellen, dass Sie die Werte im gleichen Umfang modifizieren wäre, eine Funktion auf dem Rahmen zu schaffen und im Index beiläufig, dass in Ihrem ngClick nennen:

$scope.toggleSort = function(index) { 
    if($scope.sortColumn === $scope.headers[index]){ 
     $scope.reverse = !$scope.reverse; 
    }      
    $scope.sortColumn = $scope.headers[index]; 
} 

mit diesem als Ihre Markup:

<th ng-repeat="header in headers"> 
    <a ng-click="toggleSort($index)">{{ headers[$index] }}</a> 
</th> 

Here is a fiddle mit einem Beispiel.

---

Eine weitere Option auf eine nicht-primitiven Typ wie folgt aus (die untergeordneten Bereiche das gleiche Objekt zugegriffen wird) zu binden, wäre:

$scope.columnSort = { sortColumn: 'col1', reverse: false }; 

mit diesem als Ihr Markup:

<th ng-repeat="header in headers"> 
    <a ng-click="columnSort.sortColumn=headers[$index];columnSort.reverse=!columnSort.reverse">{{ headers[$index] }}</a> 
</th> 

Here is a fiddle mit einem Beispiel.

Answer 2

Erweiterung Gloopy Antwort, noch ein weitere Option ist die Muttereigenschaften im ng-repeat für die primitiven Typen zu ändern:

<a ng-click="$parent.sortColumn=headers[$index];$parent.reverse=!$parent.reverse">{{ headers[$index] }} 

Here is a fiddle.

Beachten Sie jedoch, dass $ Eltern ist keine dokumentierte Eigenschaft von scope, so dass dies ein wenig von einem Hack ist, so verwenden Sie auf eigene Gefahr.

Ich wünschte, AngularJS hatte eine bessere Möglichkeit, mit diesen "inneren Bereichen" umzugehen, die durch ng-repeat, ng-switch usw. erzeugt werden, weil wir häufig Eigenschaften des übergeordneten Bereichs ändern müssen, die Primitive sind.

Siehe auch den aufschlussreichen Kommentar von Gloopy über die Vererbung von Gültigkeitsbereichen in Bezug auf Primitive und Nicht-Primitive here.