Sortieren von Artikeln nach Name in Vorlage anstelle von Controller

Question

Here is my runable Plunker

Ich möchte Elemente nach Name sortieren. Dies ist der Fehler, für den oberen, "Bitte wählen Sie einen Namen", wird es als ein leeres Feld angezeigt.

<select ng-options="student as student.name for student in students | orderBy: sortNameExcludeTopOne" 
     ng-model = "student">   
</select> 




$scope.sortNameExcludeTopOne = function(student) { 
     if (student.id === 0) { 
      return -1; 
     } 
     return student.name; 
     } 

Was ich will:

• Ich sortiere jetzt Artikel durch seinen Namen durch eine benutzerdefinierte Funktion in der Steuerung verwenden, können wir Einzelteile sortieren, indem der Name in der Vorlage? statt im Controller?

• Welche UI ich wählen möchte, ist: "Bitte wählen Sie einen Studentennamen" -> "Bar" -> "Foo"

Update: Ich die "Bitte wählen Sie einen Studentennamen" wollen an der Spitze wählen

Answer 1

Sie müssen nicht um das Element Array schieben, können Sie dann in der Ansicht setzen direkt:

<select ng-options="student as student.name for student in students | orderBy: 'name'" ng-model = "student"> 
    <option value="">Please select a student name</option> 
</select> 

Answer 2

möchten Sie die Möglichkeiten ihnen zur Verfügung unter dem Namen sortiert:

<select ng-options="student as student.name for student in students | orderBy: 'name'" ng-model="student">   
</select> 

, dass die Schüler durch ihre Eigenschaft ‚Name‘ sortieren soll.

Edit: Wenn Sie die zusätzliche Option an der Spitze hinzufügen möchten, dann nutzen Sie Ihre Controller die ‚Schüler‘ zu sortieren zuerst:

students() { 
    const studentList = someStudents(); 
    studentList.sort((a, b) => { 
    if(a.name < b.name) return -1; 
    if(a.name > b.name) return 1; 
    return 0; 
    }); 
    studentList.unshift({ new: option, goes: here }); 
} 

Dann können Sie es dort sortieren, und legen Sie eine weitere Option am Anfang mit der Option, die sichtbar sein soll.

Übrigens könnten Sie orderBy: 'name' noch verwenden, vorausgesetzt, Ihre Optionen basieren auf 'value'; Sie müßten wie so einen weiteren Standardeintrag mit einem numerischen Wert haben:

<select ng-options="student as student.name for student in students | orderBy: 'name'" 
    ng-model="student"> 
    <option value="-1">Please select a student name:</option> 
</select>