我有一张包含一些样本数据的表格.我有一个按钮,我想在表格行中使用,将在单击时删除整个表格行.我编码的问题是从表行中删除内容并保留按钮和表格行.或者它将删除最后一个表行而不是单击该按钮的行.
这是我有的:
控制器:
$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>
您可以在模板中使用$index,以便获取产品数组的索引.
<td><input type="button" data-ng-click="removeRow($index)"/></td>
然后在控制器中,执行以下操作:
$scope.removeRow = function (idx) { $scope.products.splice(idx,1); };