Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding ng-model inside ng-repeat loop in AngularJS

I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been 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's 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 a fiddle: http://jsfiddle.net/cyberwombat/zqTah/

Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.

I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?

like image 822
cyberwombat Avatar asked Jan 19 '13 04:01

cyberwombat


People also ask

What is the use of NG-repeat in AngularJS?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

Does ng-repeat create a new scope?

Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.

How do you use two ng-repeat in a table?

You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.


2 Answers

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

Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).

Fiddle.

For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.

like image 98
Mark Rajcok Avatar answered Oct 22 '22 03:10

Mark Rajcok


<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> 
like image 26
imdba Avatar answered Oct 22 '22 03:10

imdba