Question

我正在处理一个有点冗长的表单，其中有一个部分，其中动态添加/删除了一个表单字段块。到目前为止，我还没有找到使这种方法有效的方法。

例如，如果我添加3个子转包商并为每个转包商填写输入，则ngmodel会保留应有的值。但是，如果我删除其中一个字段，则ngmodel仍然保持输入值。另外，如果我删除系列中的第二个字段，它实际上并没有删除该实例，它只是减少了计数，所以不是像我应该的那样拥有字段＃1和字段＃3，我实际上有字段＃1和字段＃2。

所有这一切的最终结果是提交到流程页面并循环遍历添加的字段总数并将它们插入到数据库中。

我是angularjs的新手，所以我不确定我尝试的方法是否是最佳实践，因为它看起来过于复杂，所以我愿意接受如何改进过程的建议好。

HTML

 <div ng-repeat="subcontractor in subcontractors">
   <div class="well well-sm">Subcontractor #{{subcontractor.id}}<span id="subCounter"></span>
     <button type="button" ng-click="removeSub()" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   </div>
   <div class="form-group">
     <div class="col-md-6">
       <label for="subName">Subcontractor Name</label>
       <input type="text" class="form-control" id="subName" name="subName" placeholder="Subcontractor" ng-model="formData.subName['subName'+($index+1)]">
     </div>
     <button type="button" class="btn btn-info btn-sm pull-right" ng-show="showAddSub(subcontractor)" ng-click="addNewSub()">[+] Add New Sub</button>
 </div>

ANGULARJS

$scope.addNewSub = function() {
  var newItemNo = $scope.subcontractors.length+1;
  $scope.subcontractors.push({'id': +newItemNo});
};

$scope.removeSub = function() {
  var newItemNo = $scope.subcontractors.length-1;
  $scope.subcontractors.splice($scope.subcontractors-1, 1);
};

$scope.showAddSub = function(subcontractor) {
  return subcontractor.id === $scope.subcontractors[$scope.subcontractors.length-1].id;
};

如何使用angularjs将动态生成的表单字段提交到处理页面？

0 个答案: