CODEWITHSUNDEEP
javascripthtmlangularjs
jonhobbs
jonhobbs

Reputation: 27972

Angular JS form appears twice on page, how to deal with duplicate IDs?

I an using ng-include to load a form onto the page (templates/form.html).

The user can also click a button which opens an Angular UI modal window, containing the same form loaded from the same template.

This is causing me problems because I am using <label for="email"> for things like checkboxes and having the form on the page is causing duplicate element IDs (so clicking labels checks the box in both forms).

Is there a way to load the include then alter the names of the IDs in each using some kind of interpolation? Maybe something like <input type="checkbox" id="{{instanceName}}-email">

Or perhaps there is a better solution?

Upvotes: 0

Views: 127

Answers (1)

bdavidxyz
bdavidxyz

Reputation: 2560

Yes, but you could have naming collision if the scope of the modal inherits from its parent.

So make sure that your modal has a completly new an independant scope and then change instanceName on controller initialization.

Upvotes: 1

Related Questions