Ich habe eine Reihe von Kacheln, die eine bestimmte Anzahl anzeigen, je nachdem, welche Option vom Benutzer ausgewählt wird. Ich möchte jetzt eine Sortierung nach der angezeigten Nummer implementieren.
Der folgende Code zeigt, wie ich ihn implementiert habe (indem Sie einen Wert im Bereich der übergeordneten Karten abrufen / festlegen). Da die orderBy-Funktion eine Zeichenfolge verwendet, habe ich versucht, eine Variable im Kartenbereich namens curOptionValue festzulegen und danach zu sortieren, aber es scheint nicht zu funktionieren.
Es stellt sich also die Frage, wie ich eine benutzerdefinierte Sortierfunktion erstellen kann.
<div ng-controller="aggViewport" >
<div class="btn-group" >
<button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
<div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
<table width="100%">
<tr>
<td align="center">
<h4>{{card.name}}</h4>
</td>
</tr>
<tr>
<td align="center"><h2>{{getOption()}}</h2></td>
</tr>
</table>
</div>
</div>
und Controller:
module.controller('aggViewport',['$scope','$location',function($scope,$location) {
$scope.cards = [
{name: card1, values: {opt1: 9, opt2: 10}},
{name: card1, values: {opt1: 9, opt2: 10}}
];
$scope.option = "opt1";
$scope.setOption = function(val){
$scope.option = val;
}
}]);
module.controller('aggCardController',['$scope',function($scope){
$scope.getOption = function(){
return $scope.card.values[$scope.option];
}
}]);
Die akzeptierte Lösung funktioniert nur für Arrays, nicht jedoch für Objekte oder assoziative Arrays. Da Angular von der JavaScript-Implementierung der Array-Aufzählung abhängt, kann die Reihenfolge der Objekteigenschaften leider nicht konsistent gesteuert werden. Einige Browser durchlaufen möglicherweise die Objekteigenschaften lexikografisch, dies kann jedoch nicht garantiert werden.
zB Bei folgender Zuordnung:
und die Direktive
<ul ng-repeat="(key, card) in cards | orderBy:myValueFunction">
ng-repeat kann unabhängig von der Sortierreihenfolge über "card1" vor "card2" iterieren.Um dies zu umgehen, können wir einen benutzerdefinierten Filter erstellen, um das Objekt in ein Array zu konvertieren, und dann eine benutzerdefinierte Sortierfunktion anwenden, bevor wir die Sammlung zurückgeben.
Wir können in Verbindung mit benutzerdefinierten Filtern nicht über (Schlüssel-, Wert-) Paarungen iterieren (da die Schlüssel für Arrays numerische Indizes sind), daher sollte die Vorlage aktualisiert werden, um auf die Namen der injizierten Schlüssel zu verweisen.
Hier ist eine funktionierende Geige, die einen benutzerdefinierten Filter für ein assoziatives Array verwendet: http://jsfiddle.net/av1mLpqx/1/
Referenz: https://github.com/angular/angular.js/issues/1286#issuecomment-22193332
quelle
Der folgende Link erklärt Filter in Angular sehr gut. Es zeigt, wie es möglich ist, eine benutzerdefinierte Sortierlogik innerhalb einer ng-Wiederholung zu definieren. http://toddmotto.com/everything-about-custom-filters-in-angular-js
Für das Sortieren von Objekten mit Eigenschaften ist dies der Code, den ich verwendet habe: (Beachten Sie, dass diese Sortierung die Standard-JavaScript-Sortiermethode ist und nicht winkelspezifisch.) Spaltenname ist der Name der Eigenschaft, für die die Sortierung durchgeführt werden soll.
quelle
So fügen Sie die Richtung zusammen mit der orderBy-Funktion ein:
wo
quelle
myOrderbyFunction()
stattdessen sollst dumyOrderbyFunction
ohne schreiben()
, es wird für jeweils zwei Elementpaare aufgerufen, um eine benutzerdefinierte Sortierung bereitzustellen.