单击ng-repeat表单中的所有提交按钮

时间:2015-12-23 08:34:16

标签: angularjs forms angularjs-ng-repeat meanjs

我有一个使用MEAN堆栈的angularjs ng-repeat形式,其中我在ng-repeat外面有一个外部按钮来触发所有ng-repeat形式。但这样做只提交了第一个ng-repeat表格。所有其他人都没有提交。我应该如何一键提交所有表格。

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

你可以吗?