web-dev-qa-db-fra.com

AngularJS Premier dans le tableau après le filtre

Dans mon contrôleur, je peux appeler:

$scope.list[0];

Pour accéder au premier élément de mon tableau. Existe-t-il un moyen de le faire en gardant à l'esprit les filtres.

Par exemple, j'ai:

filter:search

Sur ma répétition, comment puis-je appeler $ scope.list [0]; égaler le premier résultat de recherche?

javascriptangularjsangularjs-scopeangularjs-ng-repeatangularjs-filter
16
dab

Cela peut être fait en injectant la dépendance du filtre dans un contrôleur et en l'appelant dans du code comme

var filteredArray = filterDependency(arrayToFilter,args);

qui renvoie un nouveau tableau filtré. Puisque vous utilisez le filtre "filter" (c'est un filtre dont le nom est filter), l'injection de dépendance doit être filterFilter. Votre contrôleur devrait ressembler à ceci:

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope,filterFilter){
    var filteredArray = [];
    $scope.list = ["abc","def","ghi","abcdefghi"];
    $scope.$watch('search',function(newValue){
       filteredArray = filterFilter($scope.list, newValue);
       // do something with the first result
       console.log(filteredArray[0]); // first result
    });    
});

Ce que nous faisons est de définir une surveillance sur le modèle d'entrée (search) afin que nous puissions obtenir la nouvelle valeur et filtrer à nouveau le tableau chaque fois que l'entrée est modifiée.

Aussi :

Si vous devez accéder au ng-repeat index depuis la vue, vous pouvez utiliser la propriété spéciale $index à l'intérieur du ng-repeat comme:

<div ng-repeat="item in list | filter:search">
    {{$index}}
</div>

Vous pouvez aussi utiliser $first, $middle, et $lastcomme indiqué dans ce Angular doc .

Démo : Voici un violon

10
Dan

Pas avec accès au support. Si vous avez un ng-repeat avec un filtre:

ng-repeat="thing in things | filter:search"

La liste filtrée ici est un peu anonyme - elle n'a pas de nom auquel vous pouvez accéder.

Cela dit, si vous jetez un œil à la docs for ngRepeat , vous verrez qu'à l'intérieur de la portée de chaque répéteur, vous avez accès à $index, $first, $middle, et $last.

Donc quelque chose comme

<body ng-app="App" ng-controller="Main">
    <pre ng-repeat="n in nums | filter:isOdd">
        n={{n}}:index={{$index}}:first={{$first}}:middle{{$middle}}:last={{$last}}
    </pre>
</body>

Donnerait:

    n=1:index=0:first=true:middlefalse:last=false

    n=3:index=1:first=false:middletrue:last=false

    n=5:index=2:first=false:middlefalse:last=true

Violon

3
satchmorun

Utilisez-vous "ng-repeat"? Si c'est le cas, jetez un œil aux propriétés $ first, $ index, $ middle et $ last. Cela vous permettra d'obtenir des informations sur l'élément spécifique de la répétition.

Pour plus d'informations, consultez ici: http://docs.angularjs.org/api/ng.directive:ngRepeat

0
Aaron Hickman