multi ng -repeat and remove rows in angular js

Question

I'm new to AngularJs and I'm stuck in multi ng-repeat.

HTML CODE

<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 CODE

/****************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});
      };

Here when I click ADD ANOTHER PRODUCT it should create an entire row in the table without the columns of Batch and Quantity, but now it's appearing as it in before row created.

Then when I click ADD BATCH it should create under the table column Batch and Quantity of the corresponding row, but now it's adding in all the rows and when I remove added batch, it should remove the corresponding batch, but now it's removing the last added batch.

The same happens when I remove added product (Entire Row), it should remove the corresponding row of the product but now it's removing lastly added Product row.

How can I fix all the aforementioned issues?

Please help me

Stanislav Kvitash · Accepted Answer · 2017-06-19 12:55:00Z

There are multiple issues with your approach:

1) You are using a global array listAddbatches but you want to add the batches by product, so why shouldn't you use product.listAddbatches array?

2) When 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) Using array length to generate id like var newItemNo = $scope.listAddbatches.length + 1; is not a good idea since the array length could change (when removing items) in a way that you will have the same ids for different elements.

4) This line is very strange {'batch_id[newItemNo]':'','product_count[newItemNo]':''}, since you are calculating newItemNo, but this is a simple string 'batch_id[newItemNo]'. Why do you need this?

5) Do not recommend to use $index to remove items, since it could point to some other element in case of filtering.

Your code could like this (simplified version), hope this helps:

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>

Thank you so much. yes I know there is multiple issues cause beginner of Angular. the code which you answered working here, same I copy and paste to my project. it working but removing batch not work properly, still it remove last Batch added. But here its working properly. Please help me
@Gopalakrishnan try removing all the occurrences of track by $index in the html view just to diagnose the problem and see if this helps. Possibly you can make a jsfiddle which can illustrate the issue you are experiencing?
no $index in my html page. but it still removing last elements of batch
Can you please attach a working example that will illustrate the problem?

Collectives™ on Stack Overflow

multi ng -repeat and remove rows in angular js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related