7

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

3 Answers 3

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.