Liaison du modèle ng dans la boucle ng-repeat dans AngularJS

J'essaie de traiter le problème de la portée à l'intérieur d'une boucle ng-repeat - j'ai parcouru pas mal de questions mais je n'ai pas tout à fait réussi à faire fonctionner mon code.

Code contrôleur:

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

Vue:

<div ng-app>
     <div ng-controller="Ctrl">
       <div ng-repeat="line in lines">
           <div class="preview">{{text}}{{$index}}</div>

       </div>
       <div ng-repeat="line in lines">
           <-- typing here should auto update it's preview above -->
           <input value="{{line.text}}" ng-model="text{{$index}}"/>
            <!-- many other fields here that will also affect the preview -->
       </div>
     </div>
    </div>

Voici un violon: http://jsfiddle.net/cyberwombat/zqTah/

En gros, j'ai un objet (c'est un générateur de flyers) qui contient plusieurs lignes de texte. Chaque ligne de texte peut être modifiée par l'utilisateur (texte, police, taille, couleur, etc.) et je souhaite en créer un aperçu. L'exemple ci-dessus montre uniquement le champ de saisie pour saisir du texte et je voudrais que cela mette à jour automatiquement / au fur et à mesure que vous tapez le div d'aperçu, mais il y aura beaucoup plus de contrôles.

Je ne suis pas non plus sûr d'avoir le bon code pour l'index de boucle - est-ce la meilleure façon de créer un nom de modèle ng à l'intérieur de la boucle?

javascript angularjs

— cyberwombat
source

le violon ne semble pas fonctionner ..

— philx_x

Réponses:

116

Pour chaque itération de la boucle ng-repeat, lineest une référence à un objet de votre tableau. Par conséquent, pour prévisualiser la valeur, utilisez {{line.text}}.

De même, pour DataBind au texte, DataBind au même: ng-model="line.text". Vous n'avez pas besoin d'utiliser valuelors de l'utilisation de ng-model (en fait, vous ne devriez pas).

Violon .

Pour un examen plus approfondi des portées et de la répétition ng, voir Quelles sont les nuances de l'héritage prototypique / prototypique de portée dans AngularJS? , section ng-répéter .

— Mark Rajcok
source

qu'en est-il du test e2e de ce code? Je veux dire comment sélectionner une entrée si son modèle est dynamique?

— devmao

Les éléments en cours d'itération doivent-ils alors être des objets? En d'autres termes, ils ne peuvent pas être des primitives, comme des chaînes, par exemple $ scope.lines = ['a', 'b', 'c']?

— berto

@berto, oui, ce doivent être des objets. Ceci est discuté dans la référence liée, "Quelles sont les nuances de la portée prototypique ...".

— Mark Rajcok

J'ai un problème similaire avec ng-repeat / ng-model. J'ai fait des recherches et je pense que j'y suis presque. Si quelqu'un pouvait y jeter un œil, je l'apprécierais vraiment. stackoverflow.com/questions/32855575/…

— user1532669

<h4>Order List</h4>
<ul>
    <li ng-repeat="val in filter_option.order">
        <span>
            <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
            &nbsp;{{filter_option.order_name[$index]}}
        </span>
        <select title="" ng-model="filter_param[val]">
            <option value="asc">Asc</option>
            <option value="desc">Desc</option>
        </select>
    </li>
</ul>

— imdba
source