javascript - multi ng -重复并删除 Angular js中的行

Question

我是 AngularJs 的新手，我陷入了 multi ng-repeat 的困境。

HTML 代码

<table class="table table-bordered tdPaddingNull verTop">
                      <thead>
                        <tr>
                          <th width="200px">Product Details </th>
                          <th width="250px">Current Availability</th>
                          <th width="200px">Batch </th>                                                                          
                          <th>Quantity</th>                                                     
                          <th>Rate INR </th>                                                     
                          <th>Amt. INR</th>                                                     
                          <th>Converted Amount</th>                                                     
                        </tr>
                      </thead>

                      <tbody>
                        <tr ng-repeat="(i,product) in listproducts track by $index">
                          <td style="padding: 7px;"> 
                                <input auto-complete ui-items="prductdetail" ng-model="formData.product_name[i]" class="form-control form-white" my-id="{{i}}"/>
                                <input id="product_id{{i}}" placeholder="productid"  type="hidden" value="" ng-model="formData.product_id[i]" my-id="{{i}}"/>

                                <a ng-click="addProductBatch()" title="Add Another Batch Quantity" style="float:right;"><i class="fa fa-plus" aria-hidden="true"></i> ADD BATCH </a>
                          </td> 
                          <td class="line-item-column item-currentavail transferorder-lineitem">
                             <div class="row text-muted font-sm">
                              <div class="col-md-6">
                              Source Stock
                            </div>
                            <div class="separationline col-md-6">
                              Destination Stock
                            </div>
                            </div>
                            <div class="row font-xs">
                              <div class="col-md-6">
                                0.00 Units
                              </div>
                              <div class="separationline col-md-6">
                                0.00 Units
                              </div>
                            </div>
                           </td>
                          <td style="padding: 7px;"> 
                               <div style="display:inline-block;width:100%;" ng-repeat="addBatch in listAddbatches">
                                    <select  class="form-control form-white  selectNor" ng-model="formData.batch_id[i]" ng-change="changedBatchValue(formData.batch_id)" style="margin-bottom: 5px;width: 88%;float: left;">
                                         <option value="">Select Batch</option>
                                         <option value="{{blist.batch_id}}" ng-repeat="blist in batchList">{{blist.batch_number}}</option>
                                     </select> 
                                     <a class="inputTabel1" ng-click="removeBatch($index)" title="Remove Batch"  style="float:left;margin-left: 4px;"> <i class="fa fa-times-circle-o" aria-hidden="true" ></i>
                                     </a>
                                </div>                                   
                          </td>                              

                          <td style="padding: 7px;"> 
                              <input class="form-control form-white"  type="text" value="" ng-model="formData.product_count[i]" ng-repeat="addBatch in listAddbatches"  style="margin-bottom: 5px;"/>
                          </td> 
                          <td style="padding: 7px;"> 
                                <input class="form-control form-white "  placeholder="Selling Price"  type="text" value="0.00" ng-model="formData.sel_inr_rate[i]">
                          </td>
                          <td> 
                                <input class="form-control form-white form-Tabel"  placeholder="Amount in INR"  type="text" value="0.00" ng-model="formData.sel_inr_amount[i]" readonly />
                          </td>
                          <td class="Amount  "> 
                                <input class="form-control form-white form-Tabel"  placeholder=""  type="text" value="0.00" ng-model="formData.exc_total_amount[i]" readonly />
                                <button class="inputTabel" ng-click="removeProduct($index)"> <i class="fa fa-times-circle-o" aria-hidden="true"></i>
                                </button>
                          </td>  
                        </tr>
                      </tbody>
                    </table>

Angular 代码

/****************ADD ANOTHER BATCH QUANTITY**************/
    $scope.addAnotherProduct = function(listproducts,$event) {
        newItemNo = $scope.listproducts.length+1;
        $scope.listproducts.push({'batch_id[newItemNo]':'','product_count[newItemNo]':''});
      };
    $scope.removeProduct = function(index) {
        /*var lastItem = $scope.listproducts.length-1;
        $scope.listproducts.splice(lastItem);
        $scope.listAddbatches = '';*/
         $scope.listproducts.splice(index,1);
      };
      $scope.removeBatch = function(index) {
        /*var lastItem = $scope.listAddbatches.length-1;
        $scope.listAddbatches.splice(lastItem);
        $scope.listAddbatches = '';*/
         $scope.listAddbatches.splice(index,1);
      };
    $scope.addProductBatch = function() {
        var newItemNo = $scope.listAddbatches.length+1;
        $scope.listAddbatches.push({'id':'batch'+newItemNo});
      };

在这里，当我点击添加其他产品时，它应该在表中创建一整行，不包含“批处理”和“数量”列，但现在它显示为创建行之前的样子。

然后，当我单击ADD BATCH时，它应该在相应行的表列“批处理和数量”下创建，但现在它正在添加所有行，当我删除添加的批处理时，它应该删除相应的批处理，但现在它正在删除最后添加的批处理。

当我删除添加的产品(整行)时，也会发生同样的情况，它应该删除产品的相应行，但现在它正在删除最后添加的产品行。

如何解决上述所有问题？

请帮助我

Answer 1

您的方法存在多个问题:

1) 您正在使用全局数组 listAddbatches，但您想按产品添加批处理，那么为什么不应该使用 product.listAddbatches 数组呢？

2) 当using track by $index you will not able to delete correct element from array or object since compiler directive is not re-compiling the element when its data attribute changes时。

3) 使用数组长度生成 id，如 var newItemNo = $scope.listAddbatches.length + 1; 不是一个好主意，因为数组长度可能会以某种方式改变(在删除项目时)不同的元素将具有相同的 id。

4) 这行代码非常奇怪{'batch_id[newItemNo]':'','product_count[newItemNo]':''}，因为您正在计算newItemNo，但这是一个简单的字符串'batch_id[newItemNo]'。为什么需要这个？

5) 不建议使用 $index 来删除项目，因为在过滤时它可能会指向其他一些元素。

您的代码可能像这样(简化版本)，希望这有帮助:

angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
      $scope.listproducts = [];

      $scope.addAnotherProduct = function(listproducts) {
        listproducts.push( {
            listAddbatches: []
        });
      };

      $scope.removeProduct = function(product) {
         var index = $scope.listproducts.indexOf(product); 
         if (index >= 0)
            $scope.listproducts.splice(index, 1);
      };

      $scope.removeBatch = function(product, batch) {
         var index = product.listAddbatches.indexOf(batch); 
         if (index >= 0)
           product.listAddbatches.splice(index, 1);
      };

      $scope.addProductBatch = function(product) {
        product.listAddbatches.push({ });
      }; 
});

<script src="https://code.angularjs.org/1.6.4/angular.js" ></script>
<html ng-app="plunker">
  <body ng-controller="MainCtrl">
  
<table class="table table-bordered tdPaddingNull verTop">
                      <thead>
                        <tr>
                          <th width="200px">Product Details </th>
                          <th width="250px">Current Availability</th>
                          <th width="200px">Batch </th>                                                                          
                          <th>Quantity</th>                                                     
                          <th>Rate INR </th>                                                     
                          <th>Amt. INR</th>                                                     
                          <th>Converted Amount</th>                                                     
                        </tr>
                      </thead>

                      <tbody>
                        <tr ng-repeat="(i, product) in listproducts">
                          <td style="padding: 7px;"> 
                                <input auto-complete ui-items="prductdetail" ng-model="formData.product_name[i]" class="form-control form-white" my-id="{{i}}"/>
                                <input id="product_id{{i}}" placeholder="productid"  type="hidden" value="" ng-model="formData.product_id[i]" my-id="{{i}}"/>

                                <a ng-click="addProductBatch(product)" title="Add Another Batch Quantity" style="float:right;"><i class="fa fa-plus" aria-hidden="true"></i> ADD BATCH </a>
                          </td> 
                          <td class="line-item-column item-currentavail transferorder-lineitem">
                             <div class="row text-muted font-sm">
                              <div class="col-md-6">
                              Source Stock
                            </div>
                            <div class="separationline col-md-6">
                              Destination Stock
                            </div>
                            </div>
                            <div class="row font-xs">
                              <div class="col-md-6">
                                0.00 Units
                              </div>
                              <div class="separationline col-md-6">
                                0.00 Units
                              </div>
                            </div>
                           </td>
                          <td style="padding: 7px;"> 
                               <div style="display:inline-block;width:100%;" ng-repeat="addBatch in product.listAddbatches">
                                    <select  class="form-control form-white  selectNor" ng-model="formData.batch_id[i]" ng-change="changedBatchValue(formData.batch_id)" style="margin-bottom: 5px;width: 88%;float: left;">
                                         <option value="">Select Batch</option>
                                         <option value="{{blist.batch_id}}" ng-repeat="blist in batchList">{{blist.batch_number}}</option>
                                     </select> 
                                     <a class="inputTabel1" ng-click="removeBatch(product, addBatch)" title="Remove Batch"  style="float:left;margin-left: 4px;"> <i class="fa fa-times-circle-o" aria-hidden="true" ></i>
                                     </a>
                                </div>                                   
                          </td>                              

                          <td style="padding: 7px;"> 
                              <input class="form-control form-white"  type="text" value="" ng-model="formData.product_count[i]" ng-repeat="addBatch in product.listAddbatches"  style="margin-bottom: 5px;"/>
                          </td> 
                          <td style="padding: 7px;"> 
                                <input class="form-control form-white "  placeholder="Selling Price"  type="text" value="0.00" ng-model="formData.sel_inr_rate[i]">
                          </td>
                          <td> 
                                <input class="form-control form-white form-Tabel"  placeholder="Amount in INR"  type="text" value="0.00" ng-model="formData.sel_inr_amount[i]" readonly />
                          </td>
                          <td class="Amount  "> 
                                <input class="form-control form-white form-Tabel"  placeholder=""  type="text" value="0.00" ng-model="formData.exc_total_amount[i]" readonly />
                                <button class="inputTabel" ng-click="removeProduct(product)"> <i class="fa fa-times-circle-o" aria-hidden="true"></i>
                                </button>
                          </td>  
                        </tr>
                      </tbody>
                    </table>
                    
                    
                    
            <button ng-click="addAnotherProduct(listproducts)">Add Another Product</button>
  </body>
</html>