Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJs dynamic name for a form inside ng-repeat

Tags:

How do I name a form inside ng-repeat with a dynamic name?

<div ng-repeat="item in itemList">  <form name="item_details" ng-class="validateForm(item_details)">    //few form elements  </form> </div> 

I want to name each form dynamically. For example add the $index to the name of the form. How do I achieve it? I tried ng-init on ng-repeat but did not work.

like image 405
suman j Avatar asked Dec 16 '14 20:12

suman j


People also ask

How do you condition in NG-repeat?

You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.

How do I get the index of an element in NG-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

What is $Index in AngularJS?

Stay on the bleeding edge of your favorite technologies. $index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}.

Does ng-repeat create a new scope?

Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.


1 Answers

You can just do:

<form name="item_details{{$index}}" ng-class="validateForm('item_details'+$index)"> 

EDIT:

You can use ng-init as well, like so:

<div ng-repeat="item in itemList" ng-init="formName = 'item_details' + $index">  <form name="{{formName}}" ng-class="validateForm(formName)">    //few form elements  </form> </div> 

If it's just to apply a class based on validity of the form, then you could apply styling to automatically added classes, such as: ng-valid:

.ng-valid {    background-color: green; } 
like image 167
New Dev Avatar answered Sep 18 '22 02:09

New Dev