ng-repeat et ng-class

Bonjour,

J'aimerais pouvoir changer le nom des variables dans ng-class mais cela provoque une erreur.
Pour que cela soit plus clair, voici le code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div ng:repeat="x in [] | range:1:circuit"> <!--ici la boucle !--> <div class="row"> <div class="col-md-2"> <div class="form-group" ng-class="{'has-error':Form.departure.$dirty && Form.departure.$invalid, 'has-success':Form.departure.$valid}"> <label translate="travel.step2.INP6">{{ mainTitle }}<span class="symbol required"></span></label>   <input type="text" class="form-control error-input" name="departure{{x}}" ng-model="myModel.departure" style="min-width:42px;" placeholder="D&eacute;part.." ng-required="currentStep == 2"> <span class="error text-small block" ng-if="Form.departure.$dirty && Form.departure.$invalid" translate="travel.step2.ERRORDEP">{{ mainTitle }}</span> <span class="success text-small" ng-if="Form.departure.$valid">✓</span> </div> </div>

---

Dans mon input, je fais ceci : name="departure{{x}}" ce qui me permet d’incrémenter mes lignes, par contre dans ng-class, si je fais ça :

Code:

---

ng-class="{'has-error':Form.departure{{x}}.$dirty && Form.departure{{x}}.$invalid, 'has-success':Form.departure{{x}}.$valid}">

---

Cela provoque une erreur.
Ma question : comment puis je incrémenter ng-class pour qu'il garde toujours le même nom que le name de l'input ?
Merci d'avance.

Bonjour,

Si tu utilise ng-class et les deux accolades, cela ne fonctionnera pas...
il faut soit utiliser ng-... soit les accolades.

bonjour Slim,

oui je m'en doutais, mais il y a t'il un moyen de changer les champs dans un ng-class, car comme mes champs change dynamiquement le ng-class dans la boucle n'est plus adapté aux input.
ou suis je obligé de passer par du jquery ?

Soit tu utilise les $index, soit tu crée un sous-formulaire comme ceci :

Code:

---

1 2 3 4 5 6

<div ng-repeat="social in formData.socials"> <ng-form name="urlForm"> <input type="url" name="socialUrl" ng-model="social.url"> <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span> </ng-form> </div>

---

Je viens de regarder les sous formulaires.
Mais j'ai l'impression que c'est plus pour changer dynamiquement les noms des inputs, mais moi c'est plutôt ce qui ce passe dans ng-class que j'aimerai modifier.
pour $index c'est bien mais c'est pareil, comment le transmettre dans la ng-class ? :

ng-class="{'has-error':Form.departure(increment).$dirty && Form.departure(increment).$invalid, 'has-success':Form.departure(increment).$valid}">

Merci pour ton aide et ta patience

Citation:

---

Envoyé par theflayer

Je viens de regarder les sous formulaires.
Mais j'ai l'impression que c'est plus pour changer dynamiquement les noms des inputs, mais moi c'est plutôt ce qui ce passe dans ng-class que j'aimerai modifier.

---

Et bien justement. Supprime le {{x}} de l'input et du coup la variable increment du ng-class.
Est-ce que tu pourrais mettre ton code sur un jsfiddle, et dire quelles erreurs tu obtiens ?

Salut Slim,

désolé de la réponse (très) tardive, j'ai été beaucoup pris.
Sur jsfiddle c'est pas évident de tout mettre dessus, j'ai essayé quand même, mais mon contrôleur ne fonctionne plus :aie:

Si je supprime les {{x}} ça fonctionnera correctement, ça m’affichera correctement toutes les ligne que je veux, mais pour l'insertion en bdd je pourrais pas les différencier car elle auront toutes le même noms.
Après j'ai palier en attendant en géant le retour d'erreur en jquery mais je trouve ça dommage.

Encore une fois merci pour ta patience.

Salut,

remarque peut-être stupide, mais j’ai l’impression que tu écris ton code AngularJS dans ton HTML. Je pense qu’il serait plus simple de le mettre dans un nouveau fichier. Au moins pour voir plus facilement les erreurs.