刪除整個表格angularjs按鈕

我有一個表格，其中包含一些示例數據。我想在表格行中使用一個按鈕，點擊時會刪除整個表格行。問題是我編碼的內容會從表格行中移除內容並留下按鈕和表格行。或者，它會刪除最後一個錶行沒有按鈕被點擊了排刪除整個表格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>

來源

2014-12-22 Troy Bryant

在AngularjS中刪除選定表格行的詳細文章https://codepedia.info/angularjs-delete-table-row-tr-on-click/ –

您可以在模板中使用$index，像這樣爲了得到的指數產品陣列。

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

然後在控制器中，做這樣的事情：

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

來源

2014-12-22 19:53:19 reptilicus

退房這個潛在的解決方案/正確的語法/對你的問題的策略：http://plnkr.co/edit/Z3NTKo?p=preview

，您可以考慮讓來自NG-重複的產品指標，這將使你的代碼非常簡單並且應該工作：

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

來源

2014-12-22 19:52:19 wbeange

你有兩個答案是正確的，至少在它們所描述的場景。

但我遇到了使用這些實現的問題。這是因爲如果您使用ng-init="rowIndex = $index"，則刪除行時角度不會更新其他元素的行號。我正在使用它，因爲刪除按鈕位於內部的重複循環中。因此，如果刪除第0行，第1行應變爲第0行，而是保留爲第1行，因此當您嘗試刪除第0行時，實際上是刪除第1行。您可以使用ng-repeat指令中的track by $index來修復此問題。

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

來源

2015-10-25 19:06:09 Danielo515

刪除整個表格angularjs按鈕

回答

相關問題