CODEWITHSUNDEEP
htmlangularjsweb
Or Perets
Or Perets

Reputation: 409

How to use ng-model inside ng-repeat

I am using ng-repeat in Angular 1.x, and I am trying to create each iteration unique ID / class / ng-model.

<input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl">

all this is under ng-repeat, and when I want to create new object, that create me the same object all the time.

I tried to add {{$id}} to ID and class but something went wrong. so how can I do that?

Thanks

Upvotes: 0

Views: 4295

Answers (2)

anoop
anoop

Reputation: 3822

Use $index inside your ng-repeat for dynamic, Like below :

<input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl{{$index}}">

but, Recommended way is to use try to use companionUrl property of your iterator newCreative, it will be unique for each item of collection.

Like for example : 

<Div ng-repeat = "newCreative in newCreativeCollection track by $index">
    <input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl">
</Div>

where your newCreativeCollection, should be like :

    $scope.newCreativeCollection  = [{
       companionUrl : '',
       //other properties
       }, 
      .. othet items
   ]

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

when I want to create new object, that create me the same object all the time.?

 ng-model="newCreative.companionUrl">

During each iteration you are using same model.Thats why you getting same value.

With ng-repeat it provide $index having different value in each iteration.

We can use it to create new modal instance.

<div ng-repeat="oneRec in arrRec">
<input type="text" id="url-placeholder"  ng-model="newCreative[$index].companionUrl">
</div>

Now,you have array of newCreative access it using index .It will create new object

Upvotes: 2

Related Questions