删除整个表行angularjs按钮

发布时间：2020-12-17 07:19:33 所属栏目：安全来源：网络整理

导读：我有一张包含一些样本数据的表格.我有一个按钮,我想在表格行中使用,将在单击时删除整个表格行.我编码的问题是从表行中删除内容并保留按钮和表格行.或者它将删除最后一个表行而不是单击该按钮的行. 这是我有的：控制器： $scope.removeRow = function (produ

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

这是我有的：

控制器：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!