Collegamento di ng-model all'interno del loop ng-repeat in AngularJS

Sto cercando di affrontare il problema dell'ambito all'interno di un ciclo ng-repeat: ho esaminato alcune domande ma non sono riuscito a far funzionare il mio codice.

Codice controller:

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

Visualizza:

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

Ecco un violino: http://jsfiddle.net/cyberwombat/zqTah/

Fondamentalmente ho un oggetto (è un generatore di volantini) che contiene più righe di testo. Ogni riga di testo può essere modificata dall'utente (testo, carattere, dimensione, colore, ecc.) E voglio creare un'anteprima per essa. L'esempio sopra mostra solo il campo di input per inserire il testo e mi piacerebbe che aggiornasse automaticamente / durante la digitazione il div di anteprima, ma ci saranno molti più controlli.

Inoltre, non sono sicuro di aver ottenuto il codice giusto per l'indice di loop: è questo il modo migliore per creare un nome di modello ng all'interno del loop?

javascript angularjs

— cyberwombat
fonte

il violino sembra non funzionare ..

— philx_x

Risposte:

116

Per ogni iterazione del ciclo ng-repeat, lineè un riferimento a un oggetto nel tuo array. Pertanto, per visualizzare in anteprima il valore, utilizzare {{line.text}}.

Allo stesso modo, per DataBind al testo, databind lo stesso: ng-model="line.text". Non è necessario utilizzarlo valuequando si utilizza ng-model (in realtà non dovresti).

Fiddle .

Per uno sguardo più approfondito agli ambiti e alla ripetizione di ng, vedere Quali sono le sfumature dell'ereditarietà prototipale / prototipica dell'ambito in AngularJS? , sezione ng-repeat .

— Mark Rajcok
fonte

che dire del test e2e di questo codice? Intendo come selezionare un input se il modello è dinamico?

— devmao

Gli elementi che vengono iterati devono essere oggetti allora? In altre parole non possono essere primitive, come le stringhe, ad esempio $ scope.lines = ['a', 'b', 'c']?

— berto

@berto, sì, devono essere oggetti. Questo è discusso nel riferimento collegato, "Quali sono le sfumature dell'ambito prototipale ...".

— Mark Rajcok

Ho un problema simile a ng-repeat / ng-model. Ho fatto delle ricerche e penso di essere quasi arrivato. Se qualcuno potesse dare un'occhiata lo apprezzerei davvero. 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
fonte