CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeatangular-ng-if
Nikola B.
Nikola B.

Reputation: 606

ng-repeat $index interpolation inside ng-if

In my app I have nested forms, some with fixed names and some with generated names using ng-repeat index:

<form name="rootForm"> 
    <div ng-repeat="child in childForms">
        <ng-form name="childForm_{{$index}}">
            <!-- form content-->
        </ng-form>
    </div>
    <ng-form name="fixedName">
        <!-- form content-->
    </ng-form>
    <ng-form name="anotherFixedName">
        <!-- form content-->
    </ng-form>
</form>

In the same html file, I want to access those forms $valid property through ng-if statement. Is that possible? I'm trying with:

<div>
    <div ng-repeat="child in childForms">
        <div ng-if="rootForm.childForm_[$index].$valid">
            Child form {{index}} is valid! 
        </div>
    </div>
    <div ng-if="rootForm.fixedName.$valid"> Valid! </div>
    <div ng-if="rootForm.anotherFixedName.$valid"> Valid! </div>
</div>

And it works fine with forms with fixed names. But for child forms with generated names it does not. What am I doing wrong?

Upvotes: 2

Views: 606

Answers (2)

Matthew Cawley
Matthew Cawley

Reputation: 2818

Try:

<div ng-if="rootForm['childForm_' + $index].$valid">

Upvotes: 1

miqh
miqh

Reputation: 3664

Your repeated element with ng-if uses an expression which won't do as you'd expect.

Instead of:

<div ng-if="rootForm.childForm_[$index].$valid">

It should probably be:

<div ng-if="rootForm['childForm_' + $index].$valid">

In the former, the markup would've been trying to access a property named exactly as childForm_[$index].

Upvotes: 1

Related Questions