Click All submit buttons from a ng-repeat form

Question

I have an angularjs ng-repeat form using MEAN stack, where i have an external button outside the ng-repeat to trigger all the ng-repeat form. but doing so it submits only the first ng-repeat form. all the others are not submitted. how should i submit all forms with one click.

HTML

  <div class="ui-widget-content">
<ol  class="minheight650">
  <div class="overflow-y-scroll">
    <div ng-repeat="item in subfoodss track by $index  | filter:categoryfilter | filter:typefilter | filter:searchallfood">
      <li  ng-show="item.name" >
        <div class="col-md-4">
          <form name="subfoodForm" id="subfoodform" data-ng-submit="addSubfood()" >
            <input type="text" data-ng-model="sbody" name="sbody" id="sbody" class="form-control" placeholder="Your Subfood" required disabled>
            <input type="text" data-ng-model="sprice" name="sprice" id="sprice" class="form-control" placeholder="Your Subfood" required disabled>
            <md-select data-ng-model="sqty" id="sqty"   required>
            <md-option value="1" selected>1</md-option>
            <md-option value="2">2</md-option>
            <md-option value="3">3</md-option>
          </md-select>
          <div class="col-md-3 ">
            <input type="checkbox" >
          </div>
          <input type="submit"  ng-click="secondFx()" id="btnTwo"  value="Subfood">
        </form>
      </div>
     </li>
    </div>
   </div>
  <div>
   <md-switch class="md-primary" ng-click="doSomething()" id="selecctall">
         <h4>Confirm All</h4>  
   </md-switch>
  </div>
 </ol>
</div>

AngularJS Controller

$scope.secondFx = function() { 
  angular.element('#btnTwo').click();
};

$scope.doSomething = function() {
 $scope.secondFx();
};

You have specified the same id for all the forms in the repeat. You should try differentiate them, using $index. Also, the documentation states that you should avoid using both ng-submit and ng-click in forms. — Giannis Paraskevopoulos, Dec 23 '15 at 08:41
Yeah you should definetely use different ids, and even more so, why do you need multiple forms? Can't you just have multiple inputs bound to an array in your `$scope` ( http://stackoverflow.com/questions/15488342/binding-inputs-to-an-array-of-primitives-using-ngrepeat-uneditable-inputs ) — victor, Dec 23 '15 at 08:53

score 0 · Answer 1 · answered Dec 23 '15 at 08:49

0

Reference elements in a controller isn't a good idea (separation of concern) so don't do angular.element('#btnTwo').click();

I think the best solution is to create a directive which will submit all child forms. This directive could be added to the selecctall button, and react on click.

Is that ok for you ?

answered Dec 23 '15 at 08:49

Sébastien Ollivier

578
2
10

Or even better replace the `angular.element('#btnTwo').click();` with a `angular.element('.markerClass').click();` - it will trigger click event on all the buttons it finds – victor Dec 23 '15 at 08:55
In fact, is not a good practice to reference DOM elements in a controller (mainly because a controller does not have to known about the view). Directives are here for that (manipulate the DOM, trigger or react to events, etc) so in this scenario, it's a better solution. – Sébastien Ollivier Dec 23 '15 at 08:57
Yeah, agree. I would say though that a directive is a bit too much. In fact a single form might be enough, I think that's where the 'dirty' part is. You don't need that . Just `ng-repeat` all the inputs and not the whole form – victor Dec 23 '15 at 09:01
Indeed, a single form seems to be more simple. But I don't known the context of Rohit Kumar Vinay, so maybe its a prerequisite and in that case the directive is always a better solution that reference the DOM in a controller. – Sébastien Ollivier Dec 23 '15 at 09:10

Click All submit buttons from a ng-repeat form

1 Answers1