126 votes

AngularJS - Comment obtenir une référence de résultat filtrée par ngRepeat

Je suis en utilisant un ng-repeat directive avec filtre comme ceci:

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

et je peux voir le rendu des résultats, très bien; maintenant je veux exécuter une certaine logique sur le résultat dans mon contrôleur. La question est de savoir comment puis-je récupérer les éléments de résultat de référence?

Mise à jour:


Juste pour clarifier: je suis en train de créer une auto complète, j'ai cette entrée:

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

et puis les résultats filtrés:

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

maintenant, je veux naviguer sur le résultat et sélectionnez l'un des éléments.

266voto

Andy Joslin Points 23231

MISE À JOUR : Voici un moyen plus facile que ce qui existait auparavant.

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

Alors $scope.filteredItems est accessible.

30voto

kevinjamesus86 Points 81

Voici la version du filtre de Andy Joslin de la solution.

Mise à jour: MODIFICATION de RUPTURE. À partir de la version 1.3.0-beta.19 (ce commit) les filtres n'ont pas de contexte et d' this sera lié à la portée globale. Vous pouvez passer soit le contexte comme un argument ou d'utiliser la nouvelle aliasing syntaxe dans ngRepeat, 1.3.0-beta.17+.

// 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);
  };
});

Alors à votre avis

<!-- 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>

Qui vous donne accès à l' $scope.filteredItems.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X