web-dev-qa-db-fra.com

répétition id dynamique

J'essaie de définir un identifiant dynamique pour mon div dans mon ng-repeat. Me laisser montrer un exemple.

<div id="$index" ng-repeat="repeat in results.myJsonResults">
    <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResults.subresults">
</div>

Mon problème est que, lorsque je clique sur mon div enfant, je veux obtenir le nom de mon identifiant parent, mais on dirait que angular ne définit pas correctement l'identifiant sur div. Est-il possible de définir un ID dynamique dans ce concept?

PS: J’ai essayé, par le passé, de créer une méthode de compteur sur mon contrôleur et de définir un index, mais il se trouve que angular ne reconnaît que la dernière valeur de cet ID.

javascripthtmlangularjs
40
marceloduende

Pour répondre à votre question, essayez ceci:

<div id="{{$index}}" ...>

Bien que ce qui précède devrait fonctionner, il se peut que ce ne soit pas ce que vous souhaitiez vraiment (!). Notez que cela est plutôt rare avec AngularJS de manipuler des éléments en les référant par leur identifiant. 

Vous devez vous concentrer sur votre modèle, décrire de façon déclarative l'interface utilisateur et laisser AngularJS faire le reste sans effectuer de manipulations DOM de bas niveau "à la main".

66
pkozlowski.opensource

Un cas d'utilisation auquel je peux penser consiste à associer des éléments <label> à leurs éléments <input> respectifs, comme indiqué dans http://jsfiddle.net/YqUAp/

Appliqué il y a une méthode de pkozlowski.opensource

<label for="{{ 'textField-' + $index }}">Option {{ $index }}</label>
<input type="text" id="{{ 'textField-' + $index }}" ng-model="field"/>

Bien que je ne sache pas si c'est la méthode la plus efficace. (Même si ce n'est que pour la lisibilité)

29
PixnBits
<div id="{{$index}}" ...>

Cela fonctionne bien, mais vous pouvez aussi mettre un identifiant dynamique avec le champ répété si, par exemple, subRepeat aurait un champ id . Ce serait:

<div id="subRepeat{{subRepeat.id}}" ...>

Cela mettra des identifiants comme subRepeat1, subRepeat2, ... sur votre div répété

5
Quidam

vous devez tenir l'index dans vos objets

results = { myJsonResults : [ 
    { name: "abc", id: 1, subResults: [
                               { subName: "123", id: 1 },
                               { subName: "456", id: 2 }] }
    { name: "xyz", id: 2, subResults: [
                               { subName: "789", id: 1 },
                               { subName: "098", id: 2 }] }
                            ] };

De plus, votre répétition fait référence aux résultats, ce qui les déconnecte, utilisez plutôt thisResult:

<div id="thisResult.id" ng-repeat="thisResult in results.myJsonResults">
    {{ thisResult.name }}
    <div id="subResult.id" ng-click="saveID(subResult.id)" ng-repeat="subResult in thisResult.subResults"> {{ subResult.subName }} </div>
</div>
0
BaneStar007