javascript - example - Encuadernación ng-model dentro de ng-repeat loop en AngularJS

ng-repeat example

Question

Estoy tratando de lidiar con el problema del alcance dentro de un bucle de repetición ng. He navegado bastantes preguntas pero no he podido lograr 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 múltiples líneas de texto. Cada línea de texto puede ser ajustada por el usuario (texto, fuente, tamaño, color, etc.) y quiero crear una vista previa para ella. El ejemplo anterior solo muestra el campo de entrada para ingresar texto y me gustaría que actualice automáticamente la división 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?

Answer 1

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

Del mismo modo, para enlazar datos con el texto, enlace de datos con el mismo: ng-model="line.text" . No necesita usar value cuando usa ng-model (en realidad no debería).

Fiddle .

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

Answer 2

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