Enlace ng-model dentro del bucle ng-repeat en AngularJS

Estoy tratando de resolver el problema del alcance dentro de un bucle ng-repeat: he examinado bastantes preguntas pero no he podido hacer que mi código funcione.

Código del controlador:

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

Ver:

<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>

Aquí hay un violín: http://jsfiddle.net/cyberwombat/zqTah/

Básicamente tengo un objeto (es un generador de folletos) que contiene varias líneas de texto. El usuario puede modificar cada línea de texto (texto, fuente, tamaño, color, etc.) y quiero crear una vista previa. El ejemplo anterior solo muestra el campo de entrada para ingresar texto y me gustaría que automáticamente / mientras escribe actualice el div de vista previa, pero habrá muchos más controles.

Tampoco estoy seguro de haber obtenido el código correcto para el índice de bucle: ¿es esa la mejor manera de crear un nombre de modelo ng dentro del bucle?

javascript angularjs

— ciberwombat
fuente

el violín no parece funcionar ..

— philx_x

Respuestas:

116

Para cada iteración del ciclo ng-repeat, linees una referencia a un objeto en su matriz. Por lo tanto, para obtener una vista previa del valor, utilice {{line.text}}.

Del mismo modo, a DataBind al texto, databind a la misma: ng-model="line.text". No necesita usar valuecuando usa ng-model (en realidad no debería).

Violín .

Para obtener una mirada más detallada a los alcances y ng-repeat, consulte ¿Cuáles son los matices de la herencia prototípica / prototípica del alcance en AngularJS? , sección ng-repeat .

— Mark Rajcok
fuente

¿qué pasa con la prueba e2e de este código? Me refiero a cómo seleccionar una entrada si su modelo es dinámico.

— Devmao

Entonces, ¿los elementos que se iteran tienen que ser objetos? En otras palabras, no pueden ser primitivas, como cadenas, por ejemplo, $ scope.lines = ['a', 'b', 'c']?

— berto

@berto, sí, deben ser objetos. Esto se discute en la referencia vinculada, "Cuáles son los matices del prototipo de alcance ...".

— Mark Rajcok

Tengo un problema similar de ng-repeat / ng-model. He investigado un poco y creo que casi he llegado. Si alguien pudiera echar un vistazo, se lo agradecería mucho. 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
fuente