4

I have a page, with a number of items (rendered through ng-repeat), each one of these items holds a bunch of "read-only" data and a form.

I'm using the ng-form directive and naming them as in this question/answer

However where mine differs is I'm not putting ng-form on the repeated element as it doesn't "feel right" to have all the display fields/divs inside that 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 get access to the forms on the scope in the controller. The answer to the question (linked above) shows that this naming convention works and I should see a number of objects on the $scope in the controller to get access to.

However as demonstrated in this plunk clicking the "View scope in console" button - shows the forms have not been added to the scope.

Do I need to change the structure of the html to have both the ng-repeat and ng-form on the same element for this to work??

Community
  • 1
  • 1
ry8806
  • 2,258
  • 1
  • 23
  • 32
  • Do you have `id` or something unique for these names? – Ed Knowles Aug 17 '15 at 11:32
  • Scopes are most often than not created based on HTML hierarchy. In your case the form object are part of scopes created due to ng-repeat. Not the parent scope. – Chandermani Aug 17 '15 at 11:33
  • you can try like this also -
    – Hmahwish Aug 17 '15 at 11:34
  • @EdwardKnowles - the $index keeps the form name unique – ry8806 Aug 17 '15 at 11:35
  • @Chandermani - wouldn't that be the case in the linked example then - or does having both directives on the same element get round this some way? – ry8806 Aug 17 '15 at 11:36
  • @neda - thanks - that's exactly what I was suggesting in the last paragraph and linked question - I'm currently treating that as a last resort (for reasons mentioned in the question) – ry8806 Aug 17 '15 at 11:36
  • @ry8806 my question was is there something originally in the models which you can use to track and not use $index ? – Ed Knowles Aug 17 '15 at 11:37
  • there is, however I've just tried it in the plunk and it doesn't seem to help matters. It doesn't look like the issue is with the ng-form name - however I might be wrong! – ry8806 Aug 17 '15 at 11:40
  • Having both directive on the same most probably will not work as, the directive priority of ng-repeat is high. It will create a new scope before the form directive gets to do its work. – Chandermani Aug 17 '15 at 11:41
  • I have updated your plunkr and created a adhoc solution to pull out forms from the inner repeat. Check here http://plnkr.co/edit/cVprvMAIsoWQuTKGIW1i?p=preview – Chandermani Aug 17 '15 at 11:47

1 Answers1

3

So, I've solved this.

What I did, which after looking around seems to be a fairly "standard" way of doing it, was to pass the form into the View() function on every call.

the 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 an "Unique name" in terms of the page (I'm not using {{$index}} to append to the form name anymore) - however as the ng-form is within a repeat - it is unique for each instance in that repeat. So I can pass "frmInputs" to the View() method on my controller - which will allow me access to the form that is currently being acted on.

ry8806
  • 2,258
  • 1
  • 23
  • 32