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>