AngularJS ng-form to ng-repeat

Question

I have a page with several elements (using ng-repeat), each of these elements contains a bunch of read-only data and a form.

I use the ng-form directive and calling them like this question / answer

However, when my difference is different from the fact that I do not put the ng-form in the repeating element, since it doesn’t “feel good” to have all the / div fields displayed inside this form.

Instead, my html looks like this:

<div ng-controller="MyController"> <div ng-repeat="inst in Repeats"> {{inst.name}} <div>Loads of "read only" content here, including charts/custom directives</div> <ng-form name=frm_{{$index}}> <input type="text" ng-model="inst.name" /> </ng-form> </div> <input type="button" value="View scope in console" ng-click="View()" /> 

The problem is that I cannot access the forms in the area in the controller. The answer to the question (linked above) shows that this naming convention works, and I have to see several objects in the $ area in the controller in order to gain access.

However, as shown in this plunk , click the "View Area in Console" button - it shows that the forms have not been added to the area.

Do I need to modify the html structure to have both ng-repeat and ng-form for the same element for this?

Answer 1

So, I solved it.

What I did, which after inspecting seems like a pretty "standard" way to do this, was to pass the form to the View () function for each call.

html looks like this:

 <div ng-controller="MyController"> <div ng-repeat="inst in Repeats"> {{inst.name}} <div>Loads of "read only" content here, including charts/custom directives</div> <ng-form name=frmInputs}> <input type="text" ng-model="inst.name" /> </ng-form> </div> <input type="button" value="View scope in console" ng-click="View(frmInputs)" /> 

Note that the form does not get a "unique name" in terms of the page (I no longer use {{$ index}} to add to the form name), however, since the ng form is inside repeat - it is unique for each instance in this repeat . Therefore, I can pass "frmInputs" to the View () method on my controller, which will allow me to access the form on which it is currently acting.