Binding an ng model inside an ng-repeat loop in AngularJS

Question

I'm trying to deal with the problem of the area inside the ng-repeat loop - I looked through a few questions, but I was not able to get my code to work.

Controller Code:

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

View:

 <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 preview above --> <input value="{{line.text}}" ng-model="text{{$index}}"/> <!-- many other fields here that will also affect the preview --> </div> </div> </div> 

Here's the script: http://jsfiddle.net/cyberwombat/zqTah/

Basically, I have an object (this is a pilot generator) that contains several lines of text. Each line of text can be changed by the user (text, font, size, color, etc.), and I want to create a preview for him. The above example only shows an input field for entering text, and I would like this to automatically or somehow update the preview, but there will be many other controls.

I'm also not sure if I got the code for the loop index - is this the best way to create the ng model name inside the loop?

Answer 1

For each loop iteration, the ng-repeat line is a reference to an object in your array. Therefore, to view the value, use {{line.text}} .

Similarly, for text binding, data binding is the same: ng-model="line.text" . You do not need to use value when using ng-model (in fact you should not).

Fiddle

For a more detailed view of areas and ng-repeat, see What are the nuances of prototype / inheritance prototype volume in AngularJS? , ng repeat section.

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>