删除整个表行angularjs按钮

时间:2014-12-22 19:46:20

标签: angularjs

我有一张包含一些样本数据的表格。我有一个我想在表格行中使用的按钮,它将在单击时删除整个表格行。问题是我编写的内容将从表行中删除内容并保留按钮和表格行。或者它将删除最后一个表行而不是单击该按钮的行。

这就是我所拥有的:

控制器:

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

3 个答案:

答案 0 :(得分:22)

您可以在模板中使用$index,以便获取产品数组的索引。

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

然后在控制器中,执行以下操作:

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

答案 1 :(得分:3)

查看您的问题的潜在解决方案/正确的语法/策略:http://plnkr.co/edit/Z3NTKo?p=preview

您可以考虑从ng-repeat获取产品索引,这会使您的代码更简单并且应该可以工作:

<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 :(得分:2)

你得到的两个答案是正确的,至少在他们描述的情景中是这样。

但我遇到过使用这些实现的问题。这是因为如果使用ng-init="rowIndex = $index",当您删除行时,angular不会更新其他元素的行号。我正在使用它,因为删除按钮位于内部ng-repeat循环中。因此,如果删除第0行,第1行应该变为第0行,而是保留为第1行,因此当您尝试删除第0行时,实际上是删除第1行。您可以使用track by $index修复此行ng-repeat指令。

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