2014-07-21 4 views
16

Ich habe Objekte wie folgt aus:Custom order orderBy Verwendung in ng-repeat

students = {name: 'Aa_Student', class: 'A_Class'}, 
      {name: 'Ab_Student', class: 'A_Class'}, 
      {name: 'Ac_Student', class: 'B_Class'}, 
      {name: 'Ba_Student', class: 'B_Class'}, 
      {name: 'Bb_Student', class: 'C_Class'}, 
      {name: 'Bc_Student', class: 'C_Class'} 

Sagen wir, die Schüler-Objekt neu gemischt wird. Ich benutze ng-repeat um die Daten anzuzeigen. Ich möchte die Objekte in der benutzerdefinierten Reihenfolge sortieren.

Zum Beispiel möchte ich die Daten so zeigen:

Name    Class 
----------------------------- 
Ac_Student   B_Class 
Ba_Student   B_Class 
Aa_Student   A_Class 
Ab_Student   A_Class 
Bb_Student   C_Class 
Bc_Student   C_Class 

Also im Grunde, ich Student der Klasse bestellen möchten, aber es B_Class kommt zuerst, dann A_Class, dann C_Class. Außerdem möchte ich nach dem Namen der Schüler in alphabetischer Reihenfolge sortieren. Wie kann ich das machen?

HTML:

<table> 
    <tr ng-repeat="student in students | orderBy:customOrder"> 
    ... 
    </tr> 
</table> 

Controller:

$scope.customOrder = function(student) { 
    $scope.students = $filter('orderBy')(student, function() { 

    }); 
}; 
+1

Es gibt zwei Möglichkeiten, dieses (1) Personalisierte Filter zu tun (2) Kurz Ihre Daten auf Controller-Ebene – dhavalcengg

+0

@dhavalcengg Also muss ich Filter verwenden? –

+1

Achten Sie auf den Tippfehler in '$ scope.studens' (fehlt ein t) – Gamb

Antwort

19

Hallo können Sie erstellen benutzerdefinierte Sortierung filtern finden Sie hier http://jsbin.com/lizesuli/1/edit

html:

<p ng-repeat="s in students |customSorter:'class'">{{s.name}} - {{s.class}} </p> 
     </div> 

AngularJS Filter:

app.filter('customSorter', function() { 

    function CustomOrder(item) { 
    switch(item) { 
     case 'A_Class': 
     return 2; 

     case 'B_Class': 
     return 1; 

     case 'C_Class': 
     return 3; 
    } 
    } 

    return function(items, field) { 
    var filtered = []; 
    angular.forEach(items, function(item) { 
     filtered.push(item); 
    }); 
    filtered.sort(function (a, b) {  
     return (CustomOrder(a.class) > CustomOrder(b.class) ? 1 : -1); 
    }); 
    return filtered; 
    }; 
}); 
+1

Genau das habe ich gesucht. Vielen Dank. –

+2

Hallo da, 'angular.forEach (Artikel, Funktion (Artikel) { filtered.push (Artikel); });' Dieser Code sieht für mich unnötig aus, ist es nicht genug zu sagen 'var filtered = items;' – codtex

-1

die orderBy als Eigenschaft der Objekte festlegen nur zitieren, dass Eigenschaftsnamen im Markup:

ng-repeat="student in students |orderBy:'name' | orderBy:'class'" 

DEMO

+0

Danke, aber ich möchte bestellen, dass B_Class zuerst geht. Es ist keine alphabetische Reihenfolge. –

10

Kennen Sie dieses alte ist aber nützlich sein kann andere ...

Sie können auch eine einfache benutzerdefinierte Sortierfunktion erstellen. "Nicht ganz ein Filter":

$scope.customOrder = function (item) { 
     switch (item) { 
      case 'A_Class': 
       return 2; 

      case 'B_Class': 
       return 1; 

      case 'C_Class': 
       return 3; 
     } 
    }; 

Und dann verwenden, wie man wollte:

<table> 
<tr ng-repeat="student in students | orderBy:customOrder"> 
... 
</tr>