wake-up-neo.com

Wie kann ich die Objektdatenquelle in ng-repeat in AngularJS sortieren?

Angenommen, ich habe folgende Benutzer:

$scope.users = {
  "2": {
    email: '[email protected]',
    name: 'John'
  },
  "3": {
    email: '[email protected]',
    name: 'Elisa'
  }
}

Ich möchte einen <select> mit den folgenden Optionen erstellen:

<option value="3">Elisa</option>
<option value="2">John</option>

Mit anderen Worten, Benutzer sollten nach Namen sortiert werden.

Ich habe Folgendes mit der Syntax (key, value) in expression versucht, aber es funktioniert nicht:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
        value="{{ user.id }}">
  {{ user.name }}
</option>

Live-Beispiel hier.

Was vermisse ich?

Bitte schlagen Sie keine Lösungen mit ng-options vor, da ich ui-select2 verwende, das mit ng-options nicht kompatibel ist.

angularjsangularjs-ng-repeatangularjs-orderby
47
Misha Moroshko

Während Sie dies in dem Thread sehen, auf den die Antwort der Autorin in einem Link verweist, dachte ich, es wäre gut, wenn Sie eine der oben genannten Problemumgehungen für SO veröffentlichen:

Es ist richtig, dass dies technisch nicht implementiert ist, aber es ist eine einfache Lösung, wenn Sie Ihr Datenmodell leicht ändern möchten: Verwenden Sie einen benutzerdefinierten Filter, um ein Array der Eigenschaften des Objekts zu generieren (ohne - Ersetzung). Wenn Sie das Schlüsselfeld zu den Objekten hinzufügen ("id" im obigen Fall), sollten Sie das gewünschte Verhalten erhalten können:

app.filter("toArray", function(){
    return function(obj) {
        var result = [];
        angular.forEach(obj, function(val, key) {
            result.Push(val);
        });
        return result;
    };
});
...

$scope.users = {
    1: {name: "John", email: "[email protected]", id: 1},
    2: {name: "Elisa", email: "[email protected]", id: 2}
};

Hier ist die ng-repeat-Direktive, die verwendet werden könnte:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>

Und hier ist der plunkr .

Beachten Sie, dass der orderBy-Filter name als Parameter und nicht user.name verwendet.

Leider führt das Hinzufügen der id-Eigenschaft zu Ihren Objekten zu einem Konflikt mit dem Schlüssel im übergeordneten Objekt. 

In dem Link, den Sie in Ihrer Antwort erwähnt haben, gibt es auch Lösungsvorschläge, die die id-Eigenschaft in den Benutzerobjekten im laufenden Betrieb erstellen, aber ich denke, dass dieser Ansatz etwas weniger chaotisch ist (was die Einführung der Datenreplikation kostet).

54
mhess

OK, ich habe die Antwort gefunden: 

Es ist noch nicht implementiert :(

9
Misha Moroshko

Wenn Sie die akzeptierte Antwort hinzufügen und Ihr Datenformat sehen, sollten Sie Ihre Daten als konvertieren

app.filter('myFilterUsers',function(){
    return function(data)
    {
        var newRes = [];
        angular.forEach(data,function(val,key){
            val["id"] = key;  //Add the ID in the JSON object as you need this as well.
            newRes.Push(val);
        });
        return newRes;
    }
});
0
Saksham