Append a string and $index in AngularJS

1
votes

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?

3
htmlangularjsangularjs-directive
what is the point of this, you have already array in your hand why do you need these primitive models? - Poyraz Yilmaz
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
so you need to key of parentlist object am I right? - Poyraz Yilmaz
@wickY26 - Thanks,Got what you are trying to say. fixed it. - Gokul
I tried to create an exmaple for you check my answer if it fits you... - Poyraz Yilmaz

3 Answers

1
votes

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...

0
votes

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>

0
votes

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>

DEMO: http://plnkr.co/edit/ba6EM0KShiZ8AS8uKVCm