Binding ng-model inside ng-repeat loop in AngularJS

Question

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?

the fiddle doesn't seem to work ..

philx_x
– philx_x

2014-12-04 13:43:32 +00:00
Commented Dec 4, 2014 at 13:43 — philx_x
– philx_x, Commented Dec 4, 2014 at 13:43

Community · Accepted Answer · 2017-05-23 12:02:47Z

116

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.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jan 19, 2013 at 4:36

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

devmao Over a year ago

what about the e2e test of this code? I mean how to select an input if it model is dynamic?

berto Over a year ago

Do the items being iterated have to be objects then? In other words they can't be primitives, like strings, e.g. $scope.lines = ['a', 'b', 'c'] ?

Mark Rajcok Over a year ago

@berto, yes, they must be objects. This is discussed in the linked reference, "What are the nuances of scope prototypal...".

user1532669 Over a year ago

I've got a similar ng-repeat/ng-model issue. I've done some research and I think I'm almost there. If anyone could take a look I'd really appreciate it. stackoverflow.com/questions/32855575/…

imdba · Accepted Answer · 2016-09-02 02:03:22Z

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>

answered Sep 2, 2016 at 2:03

imdba

461 bronze badge

Collectives™ on Stack Overflow

Binding ng-model inside ng-repeat loop in AngularJS

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related