it-swarm.com.de

AngularJS - So erhalten Sie eine ngRepeat-gefilterte Ergebnisreferenz

Ich verwende eine ng-repeat-Direktive mit folgendem Filter:

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

und ich kann die gerenderten Ergebnisse gut sehen; Jetzt möchte ich eine Logik für dieses Ergebnis in meinem Controller ausführen. Die Frage ist, wie kann ich die Referenz für die Ergebniselemente abrufen?

pdate:


Zur Verdeutlichung: Ich versuche, eine automatische Vervollständigung zu erstellen. Ich habe folgende Eingabe:

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

und dann die gefilterten Ergebnisse:

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

jetzt möchte ich im Ergebnis navigieren und eines der Elemente auswählen.

125
Shlomi Schwartz

UPDATE : Hier ist ein einfacher Weg als vorher.

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

Dann $scope.filteredItems ist zugänglich.

265
Andrew Joslin

Hier ist die Filterversion von Andy Joslins Lösung.

Update: BREAKING CHANGE. Ab Version 1.3.0-beta.19 ( this commit ) haben Filter keinen Kontext und this wird an den globalen Gültigkeitsbereich gebunden. Sie können entweder den Kontext als Argument übergeben oder die neue Aliasing-Syntax in ngRepeat , 1.3.0-beta.17 + verwenden.

// pre 1.3.0-beta.19
yourModule.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

// 1.3.0-beta.19+
yourModule.filter("as", function($parse) {
  return function(value, context, path) {
    return $parse(path).assign(context, value);
  };
});

Dann aus Ihrer Sicht

<!-- pre 1.3.0-beta.19 -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.19+ -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">
 {{item}}
</div>

Welches gibt Ihnen Zugriff auf $scope.filteredItems.

30
kevinjamesus86

Versuchen Sie so etwas. Das Problem mit ng-repeat ist, dass es einen untergeordneten Bereich erstellt, auf den Sie nicht zugreifen können

filterelemente

von der Steuerung

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>
23

pdate:

Auch nach 1.3.0. Wenn Sie es in den Bereich des Controllers oder des übergeordneten Elements einfügen möchten, können Sie dies nicht mit der Syntax as tun. Zum Beispiel, wenn ich den folgenden Code habe:

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

das obige wird nicht funktionieren. Um dies zu umgehen, verwenden Sie $ parent wie folgt:

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">
15
Gal Bracha

Ich habe mir eine etwas bessere Version von Andys Lösung ausgedacht. In seiner Lösung setzt ng-repeat eine Uhr auf den Ausdruck, der die Zuweisung enthält. Jede Digest-Schleife wertet diesen Ausdruck aus und weist das Ergebnis der Bereichsvariablen zu.

Das Problem bei dieser Lösung ist, dass Sie möglicherweise auf Zuweisungsprobleme stoßen, wenn Sie sich in einem untergeordneten Bereich befinden. Dies ist der gleiche Grund, warum Sie ein Punkt im ng-Modell haben sollten.

Die andere Sache, die ich an dieser Lösung nicht mag, ist, dass sie die Definition des gefilterten Arrays irgendwo im View-Markup vergräbt. Wenn es in Ihrer Ansicht oder Ihrem Controller an mehreren Stellen verwendet wird, kann es verwirrend werden.

Eine einfachere Lösung besteht darin, eine Uhr in Ihrem Controller auf eine Funktion zu platzieren, die die Zuweisung vornimmt:

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

Diese Funktion wird bei jedem Digest-Zyklus ausgewertet, damit die Leistung mit der von Andy vergleichbar ist. Sie können der Funktion auch eine beliebige Anzahl von Zuweisungen hinzufügen, um sie alle an einem Ort zu speichern, anstatt sie über die Ansicht zu verteilen.

In der Ansicht verwenden Sie einfach die gefilterte Liste direkt:

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

Hier ist eine Geige, in der dies in einem komplizierteren Szenario gezeigt wird.

10
Dave Johnson