AngularJS orderBy auf ng-repeat tut nichts

Question

ich auf einer kleinen Demo AngularJS App für meine Studenten arbeite, aber ich immer laufen in Schwierigkeiten mit einem orderBy Filter auf einem ng-repeat. Ich lade JSON-Daten über AJAX aus einem PHP-Skript. Die Daten werden gut geladen, es ist nur die Reihenfolge, die nicht funktioniert.

Dies ist der Teil der HTML-Seite von mir aus mit:

<div ng-controller="MemberListController"> 
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> 
    <hr/> 
    <button ng-click="predicate=''">Set to unsorted</button> 

    <table class="table"> 
     <thead> 
      <tr> 
       <th> 
        <button ng-click="order('gender')">Geslacht</button> 
        <span class="sortorder" ng-show="predicate === 'gender'" ng-class="{reverse:reverse}"></span> 
       </th> 
       <th> 
        <button ng-click="order('first_name')">Voornaam</button> 
        <span class="sortorder" ng-show="predicate === 'first_name'" ng-class="{reverse:reverse}"></span> 
       </th> 
       <th> 
        <button ng-click="order('last_name')">Achternaam</button> 
        <span class="sortorder" ng-show="predicate === 'last_name'" ng-class="{reverse:reverse}"></span> 
       </th> 
       <th>Geboren</th> 
       <th>Lid sinds</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="member in members track by member.id | orderBy:predicate:reverse" ng-hide="member.deleted == 1"> 
       <td>{{ member.gender }}</td> 
       <td>{{ member.first_name }}</td> 
       <td>{{ member.last_name }}</td> 
       <td>{{ member.birth_date | date:'dd-MMM-yyyy' }}</td> 
       <td>{{ member.member_since | date:'dd-MMM-yyyy' }}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Das ist mein Javascript-Code ist:

(function() 
{ 
    // init the module 
    var app = angular.module('ledenjs', []); 

    // define the memberlist controller 
    app.controller('MemberListController', ['$scope', '$http', function ($scope, $http) 
    { 
     // define and set the scope properties 
     $scope.members = []; 
     $scope.predicate = 'last_name'; 
     $scope.reverse = false; 

     // define the order method 
     $scope.order = function (predicate) 
     { 
      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
      $scope.predicate = predicate; 
     }; 

     // read the members from the db 
     $http.get('MY_URL_HERE') 
     .success(function (response) 
     { 
      console.log('Received ' + response.length + ' members.'); 
      $scope.members = response; 
     }) 
     .error(function() 
     { 
      alert('Could not retrieve members from server.'); 
     }); 
    }]); 
})(); 

Die JSON-Daten werden durch ein sehr einfaches Skript von einem generierten Beispieltabelle:

$result = mysqli_query($mysqli, "SELECT * FROM ledenjs"); 
while ($row = mysqli_fetch_assoc($result)) { 
    $data[] = $row; 
} 
header("Content-Type: application/json"); 
echo json_encode($data); 

Eine Scheibe des zurückgegebenen Daten:

[{"id":"10001","birth_date":"1953-09-02","first_name":"Georgi","last_name":"Facello","gender":"M","member_since":"1986-06-26","deleted":"0"},{"id":"10002","birth_date":"1964-06-02","first_name":"Bezalel","last_name":"Simmel","gender":"F","member_since":"1985-11-21","deleted":"0"},{"id":"10003","birth_date":"1959-12-03","first_name":"Parto","last_name":"Bamford","gender":"M","member_since":"1986-08-28","deleted":"0"},{"id":"10004","birth_date":"1954-05-01","first_name":"Chirstian","last_name":"Koblick","gender":"M","member_since":"1986-12-01","deleted":"0"}] 

Also ... Ich habe auf SO hier bei Fragen zu diesem Thema angesehen, ich habe für SortiertNach here an der AngularJS Dokumentation sieht (wie man meinen Code sehen basiert auf dort auf den Proben) , aber immer noch wird mein Tisch nicht sortieren.

Ich weiß, dass die meisten dieser Fragen beantwortet werden "OrderBy wird nicht auf Objekte, nur auf Arrays arbeiten", aber meine Daten sind ein Array nach dem Aussehen, und die tatsächliche Wiederherstellung funktioniert gut, ich bin Ich sehe die Konsolenprotokollzeile mit der korrekten Anzahl von Datensätzen, wenn ich die Seite lade.

Dies treibt mich langsam die Wand hoch ... jede Hilfe würde sehr geschätzt werden.

Mark.

Gelöst: Dank Dmitriy Khudorozhkov für den Hinweis, dass "track by" und "orderBy" zu stören neigen. Es funktioniert ist, dass Sie die „Spur durch“ am Ende setzen, nachdem alle Filter:

<tr ng-repeat="member in members | orderBy:predicate:reverse track by member.id"> 

Answer 1

<tr ng-repeat="member in members track by member.id | orderBy:predicate:reverse" ng-hide="member.deleted == 1"> 

- diese Linie in AngularJS brechen kann vor der Version 1.2; Versuchen Sie, den Teil zu entfernen und sehen Sie, ob es funktioniert.

aktualisieren: die wirkliche Lösung für Angular v.1.2 und später ist:

ng-repeat="member in members | orderBy:predicate:reverse track by member.id" 

- Tracking should come after orderBy clause.