Question

我正在努力让我的动态表单添加/减少才能正常工作。情况是我能够添加或删除表单块，但是，当我单击删除按钮时，它会删除最近添加的块而不是我单击的块。

例如，如果我为总共3个块（block1，block2，block3）添加两个新的表单块，并且我在块2上单击删除，而不是删除块2，它将删除块3。

我已经创建了一个演示这个的plunker，但只有在单独的窗口中启动预览面时才会起作用（否则添加按钮因某种原因处于非活动状态）。

工作示例（必须在plunker的弹出预览中打开才能运行）：plunker

<form class="form-horizontal" name="cpdForm" novalidate="" ng-submit="processForm()" ng-show="!message">
  <h2>Subcontractor Performance</h2>
  <hr />
  <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">×</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>
      <div class="col-md-3">
        <label for="mwbeCert">Disadvantaged Certification</label>
        <select class="form-control" name="mwbeCert" ng-model="formData.mwbeCert" required="">
          <option value="">Select MWBE Certification...</option>
          <option ng-repeat="item in dropdownpoll['mwbecert']" value="{{item.mwbeid}}">{{item.mwbe}}</option>
        </select>
      </div>
      <div class="col-md-3">
        <label for="subAmount">Contracted Amount</label>
        <div class="inner-addon left-addon">
          <i class="glyphicon glyphicon-usd"></i>
          <input type="text" class="form-control" id="subAmount" name="subAmount" placeholder="Contracted Amount" ng-model="formData.subAmount" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-4">
        <label for="subContactName">Contact Name</label>
        <input type="text" class="form-control" id="subContactName" name="subContactName" placeholder="Contact Name" ng-model="formData.subContactName" />
      </div>
      <div class="col-md-4">
        <label for="subContactPhone">Contact Phone</label>
        <input type="text" class="form-control" id="subContactPhone" name="subContactPhone" placeholder="Contact Phone" ng-model="formData.subContactPhone" />
      </div>
      <div class="col-md-4">
        <label for="subContactEmail">Contact Email</label>
        <input type="text" class="form-control" id="subContactEmail" name="subContactEmail" placeholder="Contact Email" ng-model="formData.subContactEmail" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-3">
        <label for="subRating">Subcontractor Rating</label>
        <select class="form-control" name="subRating" ng-model="formData.subRating" required="">
          <option value="">Select Subcontractor Rating...</option>
          <option ng-repeat="item in dropdownpoll['subrating']" value="{{item.subratingid}}">{{item.rating}}</option>
        </select>
      </div>
      <div class="col-md-9">
        <label for="subComment">Comments</label>
        <input type="text" class="form-control" id="subComment" name="subComment" placeholder="Comments" ng-model="formData.subComment" />
      </div>
    </div>
    <hr />
    <button type="button" class="btn btn-info btn-sm pull-right" ng-show="showAddSub(subcontractor)" ng-click="addNewSub()">[+] Add New Sub</button>
  </div>
  <input type="hidden" style="display:none;" ng-model="formData.subCount" value="{{subcontractor.id}}" />
  <div class="form-group">
    <div class="col-sm-12">
      <button class="btn btn-primary" id="submit" ng-click="submitting()" ng-disabled="buttonDisabled">{{submit}}</button>
    </div>
  </div>
</form>
<pre>{{formData}}</pre>

Answer 1

您需要将索引传递给函数removeSub

我修改了你的fn以接受一个索引

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

在您的HTML中，您只需传递当前已迭代的$index

<button type="button" ng-click="removeSub($index)" class="close" aria-label="Close">
    <span aria-hidden="true">×</span>
</button>

希望这有效。但是请注意你的formdata和subcontrators数组在此之后不同步，这就是我猜你必须解决的编程逻辑。

快乐编码

干杯。

喜

Answer 2

你正在拼接$scope.subcontractors-1只会表现得像它一样，即删除最后一个。

尝试使用$event.currentTarget作为一般规则，它会准确指出所点击的项目，并且不要忘记将$event作为删除功能的参数传递。

我希望这有助于你

Answer 3

不是一个完整的答案，但是你没有在你的script.js中告诉你这个功能要删除你只是告诉它切断一个。尝试进行设置，以便传递当前的subContractor id，如ng-click =＆＃34; removeSub（{{subcontractor.subContractorId}}）＆＃34; （不确定你的数据模型是什么）你也可以参考索引，但我相信这会更难。

使用angularjs动态形式加法/减法

3 个答案: