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.
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.
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.
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}}.
Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With