Delete the entire row of the row of the row of the table

Question

I have a table with some sample data. I have a button that I want to use in a table row that will delete the entire table row when clicked. The problem is that I encoded will remove the contents from the table row and leave the button and table row. Or it will delete the last row of the table, not the row that the button is clicked on.

Here is what I have:

:

$scope.removeRow = function (product) { var index = -1; var productArray = eval($scope.products); for (var i = 0; i < productArray.legnth; i++) { if (productArray[i].productName == product.productName) { index = i; console.log(productArray[i].productName); } } if (index === -1) { alert("something broke"); } $scope.products.splice(index, 1); } 

HTML

  <table class="table table-bordered table-hover"> <tr> <!--<th><button class="btn btn-primary" type="button" data-ng-click="showImage = !showImage">{{showImage ? "Hide" : "Show"}} Image</button></th>--> <th>Show or Hide </th> <th>Product</th> <th>Code</th> <th>Avaiable</th> <th>Price</th> </tr> <tr data-ng-repeat="product in products"> <td><input type="button" class="btn btn-primary" value="Hide" data-ng-click="removeRow(product)"/></td> <td>{{product.productName}}</td> <td>{{product.productCode}}</td> <td>{{product.releaseDate}}</td> <td>{{product.price | currency}}</td> </tr> </table> 

Answer 1

You can use $index in a template, for example, to get the index of an array of products.

 <td><input type="button" data-ng-click="removeRow($index)"/></td> 

Then in the controller do something like this:

 $scope.removeRow = function (idx) { $scope.products.splice(idx, 1); }; 

Answer 2

Check out this potential solution / correct syntax / strategy for your problem: http://plnkr.co/edit/Z3NTKo?p=preview

You might consider getting a product index from ng-repeat, this will make your code a lot easier and should work:

 <table class="table table-bordered table-hover"> <tr> <th>Show or Hide </th> <th>Product</th> <th>Code</th> <th>Avaiable</th> <th>Price</th> </tr> <tr data-ng-repeat="(productIndex, product) in products"> <td><input type="button" class="btn btn-primary" value="Hide" data-ng-click="removeRow(productIndex)"/></td> <td>{{product.productName}}</td> <td>{{product.productCode}}</td> <td>{{product.releaseDate}}</td> <td>{{product.price | currency}}</td> </tr> </table> $scope.removeRow = function (productIndex) { $scope.products.splice(productIndex, 1); } 

Answer 3

The two answers you received are correct, at least in the scenarios that they describe.

But I am having problems using these implementations. This is because angular does not update the row number of other elements when deleting a row if you use ng-init="rowIndex = $index" . I used it because the delete button was in the ng-repeat inner loop. Therefore, if you delete line 0, line 1 should become line 0, but instead it is saved as line 1, so when you try to delete line 0 you actually delete line 1. You can fix this using track by $index on its ng- repeat the directive.

 <tr data-ng-repeat="(productIndex, product) in products track by $index">