web-dev-qa-db-fra.com

Passez la valeur de la portée parent dans la boucle ng-repeat de Angular

Ce devrait être une question extrêmement simple, mais toutes les solutions de contournement que j'ai trouvées sont complexes. Je parcours en boucle un tableau d'objets en utilisant ng-repeat dans un modèle comme suit:

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ campaign.name }} ...
</div>

Puisque ng-repeat crée une nouvelle étendue, l'objet 'campaign' du contrôleur ne semble pas être accessible. Existe-t-il un moyen (mis à part d'ajouter l'objet de campagne à chaque élément de mon tableau) d'obtenir cette valeur?

Merci d'avance.

javascriptangularjsangular-template
45
Wandering Digital

Vous pouvez accéder à la portée parent en utilisant $ parent

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ $parent.campaign.name }} ...
</div>
75
Mathew Berg

Une autre méthode pourrait consister à transmettre la portée parent en tant que variable de portée à la directive i.e.

<my-directive 
    md-parent-scope="this" 
    ng-repeat="item in items"></my-directive>

C'est un peu brouillon, mais vous avez plus de contrôle sur ce que le parent est réellement et pouvez transmettre n'importe quoi.

3
marksyzm

C'est un moyen qui fonctionne sans utiliser $parent. Il parcourt les étendues imbriquées pour trouver l'objet que vous utilisez, quel que soit le nombre d'étendues qu'il doit traverser.

Dans l'étendue contenant la liste, vous pouvez définir un objet avec la liste en tant que propriété, comme ceci:

$scope.obj = {};
$scope.obj.items = ['item1','item2','item3'];

Ensuite, le ng-repeat Ressemble à ceci:

<div ng-repeat="item in obj.items | filter:'item3' track by $index">
    {{obj.items[ obj.items.indexOf(item) ]}}
</div>

(vous devez utiliser obj.items[ obj.items.indexOf(item) ] plutôt que obj.items[ $index ] car $index est l'index du tableau filtré, pas l'original)

Cela fonctionne parce que, bien que obj n'existe pas dans l'étendue actuelle, lorsque vous essayez d'accéder à sa propriété, Angular regardera au-dessus de l'étendue actuelle plutôt que de vous donner une erreur (si vous venez d'essayer {{obj}}, il serait indéfini, et Angular serait heureux de ne rien vous donner au lieu de regarder à travers des portées plus hautes). C'est un lien utile à propos de Portées imbriquées: http://www.angularjshub.com/examples/basics/nestedcontrollers/

Dans mon cas, j'avais besoin de track by $index, Car j'avais une entrée avec ng-model Liée à un élément du tableau, et chaque fois que le modèle était mis à jour, l'entrée devenait floue, car je pense que le code HTML était en cours. re-rendu. L'utilisation de track by $index A pour conséquence que les éléments du tableau avec des valeurs identiques seront répétés. Si vous modifiez l'un de ceux autres que le premier, des choses étranges se produiront. Peut-être que vous pouvez filtrer pour unicité afin d'éviter cela.

Je suis relativement nouveau dans AngularJS, alors veuillez commenter s'il me manque quelque chose de grand. Mais cela fonctionne, donc je l'utilise au moins.

3
Michael Pearson