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    lt div ng-app gt        lt div ng-controller  Ctrl  gt          lt div ng-repeat  line in lines  gt              lt div class  preview  gt   text     index   lt  div gt           lt  div gt          lt div ng-repeat  line in lines  gt              lt -- typing here should auto update it s preview above -- gt              lt input value    line text    ng-model  text   index     gt               lt  -- many other fields here that will also affect the preview -- gt          lt  div gt        lt  div gt       lt  div gt    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

User · Accepted Answer

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.

User · Answer

lt h4 gt Order List lt  h4 gt   lt ul gt       lt li ng-repeat  val in filter option order  gt           lt span gt               lt input title    filter option order name  index     type  radio  ng-model  filter param order option  ng-value     val       gt               amp nbsp   filter option order name  index             lt  span gt           lt select title    ng-model  filter param val   gt               lt option value  asc  gt Asc lt  option gt               lt option value  desc  gt Desc lt  option gt           lt  select gt       lt  li gt   lt  ul gt

[javascript] Binding ng-model inside ng-repeat loop in AngularJS

Examples related to javascript

Examples related to angularjs