Remove whole table row angularjs button

Question

I have a table with some sample data. I have a button that I want to use with in the table row that will remove the whole table row when clicked. Problem is what I have coded up will remove the content from the table row and leave the button and table row. Or it will remove the last table row not the row the button was clicked in.

Here is what I have :

controller :

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

reptilicus · Accepted Answer · 2014-12-22 19:53:19Z

22

You can use $index in the template, like so in order to get the index of the product array.

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

answered Dec 22, 2014 at 19:53

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user12121234 · Accepted Answer · 2014-12-22 19:57:29Z

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

You might consider getting the products index from the ng-repeat, this would make your code a lot simpler 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);
}

Danielo515 · Accepted Answer · 2015-10-25 19:11:33Z

2

The two answers you got are correct, at least on the scenarios they describe.

But I have experienced issues using those implementations. This is because angular does not update the row number of the other elements when you delete a row if you use ng-init="rowIndex = $index". I was using it because the delete button was on an inner ng-repeat loop. So if you remove row 0, row 1 should become row 0, but instead it is kept as row 1, so when you try to remove row 0 you are actually deleting row 1. You can fix this using track by $index on your ng-repeat directive.

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

edited Oct 25, 2015 at 19:11

answered Oct 25, 2015 at 19:06

Danielo515

7,3016 gold badges46 silver badges84 bronze badges

Collectives™ on Stack Overflow

Remove whole table row angularjs button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related