Append a string and $index in AngularJS

Question

In My AngularJs app, I have an ng-repeat like:

<div data-ng-repeat="pl in parentlist">
  <div id="test{{$index}}" ng-model='list{{$index}}' >Test</div>
</div>

The Id in the Div gets appends and renders like expected id="test0" but the ng-model doesn't behave in the same way and it throws an error

[$parse:syntax] Syntax Error: Token '$index' is unexpected, expecting [:] at column 8 of the expression [list{{$index}}] starting at [$index}}]

How do I achieve this appending? use filters?

what is the point of this, you have already array in your hand why do you need these primitive models? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Apr 3, 2014 at 17:29
I need to dynamically add a div everytime a object is added to the "parentlist". lets say $scope.parentlist.test1=[]; test1 gets added to $scope.parentlist, I want a div to add dynamically with the ng-model="test1". — Gokul
– Gokul, Commented Apr 3, 2014 at 17:33
I tried to create an exmaple for you check my answer if it fits you... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Apr 3, 2014 at 18:22

Poyraz Yilmaz · Accepted Answer · 2014-04-03 18:22:02Z

1

if you need bind your div with the keys of your parentlist just change your ng-repeat to this,

<div data-ng-repeat="(key, value) in parentlist">
   <div id="{{key}}" ng-model="key">{{key}}</div>
</div>

here is working PLUNKER...

answered Apr 3, 2014 at 18:22

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

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

Comments

Simen Echholt · Accepted Answer · 2014-04-03 17:27:13Z

0

Make list an array. Instead of having individual list variables, you have one array with multiple values

The HTML then becomes

<div id="test{{$index}}" ng-model='list[$index]' >Test</div>

answered Apr 3, 2014 at 17:27

Simen Echholt

11.3k2 gold badges36 silver badges27 bronze badges

This renders as is like ng-model="list[$index]"

atfede · Accepted Answer · 2018-07-20 00:05:43Z

0

If you need to append the index to a string (where you currently are on the ng-repeat loop iteration) you can do it like this:

<div id="num_{{$index}}" ng-repeat="obj in someArray">
    num_{{$index}}
</div>

answered Jul 14, 2018 at 7:01

atfede

4116 silver badges9 bronze badges