web-dev-qa-db-fra.com

$ index of Object dans Array en utilisant ng-repeat et un filtre

Je suis assez nouveau pour angular et j'ai pu me déplacer un peu. Mais je n'arrive pas à trouver la réponse à ce scénario ...

J'ai un tableau d'objets que je tire de Firebase. J'utilise un ng-repeat pour les objets, puis affiche les données en conséquence. J'essaye de passer l'index en tant que routeparam à un contrôleur "d'édition". Dans ce cas, j'aimerais extraire les données d'objet comme prévu. Cependant, lorsque je filtre le ng-repeat, je reçois l'index du contenu filtré. Où est-ce que je me trompe dans la recherche du véritable index?

  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
  .when('/profiles/:index', {
    templateUrl: '../views/profile.html',
    controller: 'profileCtrl'
  });

La route est en haut, le contrôleur est en bas

  .controller('profileCtrl', function( $scope, $routeParams ){

$scope.teamProfile = $scope.ourTeam[$routeParams.index];
    $scope.index = $routeParams.index;
});

Et enfin, l'extrait de code HTML à partir de la répétition. 

<div class="profileName"><a href="/profiles/{{$index}}">{{member.name}}</a><span class="handle">{{member.handle}}</span></div>
javascriptarraysangularjsangularjs-ng-repeat
15
lutonmedia

Malheureusement, $index n’est que le "décalage de l’itérateur répété (0..length-1)"

Si vous voulez l'index d'origine, vous devez l'ajouter à votre collection avant le filtrage, ou tout simplement ne pas filtrer les éléments du tout.

Une approche possible:

angular.forEach(members, function(member, index){
   //Just add the index to your item
   member.index = index;
});

<div ng-repeat="member in members">
   <a href="/profiles/{{member.index}}">
</div>

Maintenant, il semble également que ce type d’informations ressemble davantage à un identifiant qu’autre chose. J'espère que cela fait déjà partie de l'enregistrement et que vous pouvez y accéder au lieu d'utiliser l'index.

11
Josh

Essaye ça :

<div ng-repeat="member in members">
{{members.indexOf(member)}}
</div>

indexOf renvoie toujours l'index d'origine dans un ng-repeat

Démo

33
Manas

Vous pouvez utiliser une fonction pour renvoyer l'index du tableau

<div ng-repeat="post in posts | orderBy: '-upvotes'">
   <a href="#/posts/{{getPostIndex(post)}}"></a> 
</div>

Et la fonction

$scope.getPostIndex = function (post) {
    return $scope.posts.indexOf(post); //this will return the index from the array
}

Sur mon exemple, j'ai un tableau d'objets appelé "posts", sur lequel j'utilise un filtre pour les classer selon l'une de leurs propriétés (propriété "upvotes"). Ensuite, dans l'attribut "href", j'appelle la fonction "getPostIndex" en lui passant par référence , l'objet actuel.

La fonction getPostIndex () renvoie simplement l'index du tableau en utilisant la méthode Javascript array indexOf (). 

La bonne chose à propos de cela est que cette solution n'est pas liée à un filtre spécifique (comme dans @holographix answer) et fonctionnera pour tous.

6
watsabitz

Je suis tombé par hasard sur le même problème et j'ai trouvé ce super-truc sur les problèmes de git agular

items.length - $index - 1

comme

    <div ng-repeat="item in ['item', 'item', 'item'] | reversed">
      <!-- Original index: 2, New index: 0 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
      <!-- Original index: 1, New index: 1 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
      <!-- Original index: 0, New index: 2 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
    </div>

si vous êtes en difficulté comme moi, tentez votre chance:

https://github.com/angular/angular.js/issues/4268

3
holographix

Vous pouvez injecter $route et utiliser $route.current.params.index pour obtenir la valeur.

.controller('profileCtrl', function( $scope, $route ) {

     $scope.index = $route.current.params.index;

});
0
Awakening