单击ng-重复表单中的所有提交按钮。

Question

我有一个使用平均堆栈的angularjs ng重复表单，其中我在ng重复外面有一个外部按钮来触发所有ng重复表单。但是这样做，它只提交了第一个ng-重复表单。其他的都没有被提交。如何提交所有的表格，只需一次点击。

  <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控制器

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

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

Answer 1

控制器中的引用元素不是一个好主意(分离关注点)，所以不要执行angular.element('#btnTwo').click();

我认为最好的解决方案是创建一个指令，它将提交所有的子表单。该指令可以添加到selecctall按钮中，并在单击时作出反应。

你觉得可以吗？