CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Zhe Hu
Zhe Hu

Reputation: 4007

angularjs ng-repeat use $index inside ng-model directive

Try to use ng-repeat

<ul>
    <li ng-repeat = "n in [1,2,3,4]>

     <label id="{{'p'+ n }}"> {{n}} </label>
     <label ng-model="{{'p'+ n }}"> {{n}} </label>

     </li>

</ul>

The first "label" works. Its "id" is assigned properly. But the second "label" doesn't work.

Is that because "ng-model" cannot be created dynamically?

I was trying to use <select ng-model ... ng-options ...> within a ng-repeat. Not being able to create these "ng-model" dynamically, I am stuck here.

Upvotes: 1

Views: 6583

Answers (3)

Pranav Ghate
Pranav Ghate

Reputation: 13

This is not working because you have used ng-model on label tag which is not possible.

ng-model can be only used on input, select and textarea as per This

you cannot use it on div's, ul, ol, tabel etc.

Instead, to assign the value in label you can use ng-value like this:

<label ng-value="{{'p'+ n }}"> {{n}} </label>

or to assign index value to ng-model you can do:

<input type="text" ng-model="user.text[$index]"/>

to display the index you can do:

{{$index}}

Upvotes: 0

shantanusinghal
shantanusinghal

Reputation: 724

Try using ng-init to reference $index 

<li ng-repeat = "n in [1,2,3,4] ng-init="myIndex = $index">
  <label ng-model="{{'p'+ myIndex }}" />
</li>

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

ng-model is an Angular attribute, you don't need to include the {{}} -- try ng-model="'p' + n"

Upvotes: 1

Related Questions