Modèle de liaison dans la boucle de répétition dans AngularJS

Question

Je suis en train de traiter la question de la portée à l'intérieur d'une ng-repeat boucle - j'ai parcouru pas mal de questions, mais n'ont pas été en mesure d'obtenir mon code de travail.

Contrôleur de code:

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/

Fondamentalement, j'ai un objet (c'est un flyer generator) qui contient plusieurs lignes de texte. Chaque ligne de texte peut être modifié par l'utilisateur (texte, police, taille, couleur, etc) et je veux créer un aperçu. L'exemple ci-dessus ne montre que le champ de saisie pour la saisie de texte et je voudrais que automatiquement/as-you-type de mise à jour de l'aperçu de la div mais il y aura beaucoup plus de contrôles.

Je ne suis pas aussi sûr que je suis le bon code pour le bouclage de l'index est que la meilleure façon de créer une ng-nom du modèle à l'intérieur de la boucle?

Answer 1

Pour chaque itération de la ng-repeat boucle, line est une référence à un objet dans votre tableau. Donc, pour un aperçu de la valeur, il faut utiliser {{line.text}}.

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

Le violon.

Pour un regard plus en profondeur dans les étendues et ng-repeat, voir Quelles sont les nuances de portée prototypes / l'héritage par prototype dans AngularJS?, section ng-repeat.