Ligando o modelo ng dentro do loop ng-repeat no AngularJS

Eu estou tentando lidar com a questão do escopo dentro de um loop ng-repeat – eu tenho navegado bastante algumas perguntas, mas ainda não consegui fazer o meu código funcionar.

Código do controlador:

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

Visão:

 
{{text}}{{$index}}

Aqui está um violino: http://jsfiddle.net/cyberwombat/zqTah/

Basicamente eu tenho um object (é um gerador de panfleto), que contém várias linhas de texto. Cada linha de texto pode ser ajustada pelo usuário (texto, fonte, tamanho, cor, etc) e eu quero criar uma pré-visualização para ela. O exemplo acima mostra apenas o campo de input para inserir texto e eu gostaria que automaticamente / as-you-type atualizasse a visualização div, mas haveria muito mais controles.

Eu também não tenho certeza se eu tenho o código certo para o índice de loop – é a melhor maneira de criar um nome de modelo ng dentro do loop?

Para cada iteração do loop ng-repeat, line é uma referência a um object em sua matriz. Portanto, para visualizar o valor, use {{line.text}} .

Da mesma forma, para vincular ao texto, vinculá-lo ao mesmo: ng-model="line.text" . Você não precisa usar value ao usar o ng-model (na verdade você não deveria).

Violino .

Para uma visão mais aprofundada sobre escopos e ng-repeat, veja Quais são as nuances do escopo do protótipo / inheritance prototípica no AngularJS? , seção ng-repeat .

 

Order List

  •  {{filter_option.order_name[$index]}}