Gesamte Tabellenzeile entfernen angularjs button

Question

Ich habe eine Tabelle mit einigen Beispieldaten. Ich habe eine Schaltfläche, mit der ich in der Tabellenzeile verwenden möchte, die die gesamte Tabellenzeile entfernt, wenn auf sie geklickt wird. Problem ist, was ich oben programmiert habe, wird den Inhalt von der Tabellenreihe entfernen und die Knopf- und Tabellenreihe lassen. Oder es wird die letzte Tabellenzeile die Zeile nicht entfernen Sie die Taste in geklickt wurde

Hier ist, was ich habe.

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> 

Answer 1

Sie $index in der Vorlage verwenden können, wie so, um den Index zu erhalten das Produkt-Array.

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

Dann in der Steuerung, etwas tun, wie folgt aus:

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

Answer 2

Check out diese mögliche Lösung/korrekte Syntax/Strategie zu Ihrem Problem: http://plnkr.co/edit/Z3NTKo?p=preview

Sie sich anschauen sollten die Produkte Index aus dem ng-repeat bekommen, würde dies Ihren Code viel einfacher und soll funktionieren machen:

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

Answer 3

Die beiden Antworten, die Sie richtig bekam, zumindest auf den Szenarien sie beschreiben.

Aber ich habe Probleme mit diesen Implementierungen erlebt. Dies liegt daran, dass angle die Zeilennummer der anderen Elemente beim Löschen einer Zeile nicht aktualisiert, wenn Sie ng-init="rowIndex = $index" verwenden. Ich benutze es, weil der Löschen-Button in einer inneren ng-repeat-Schleife war. Wenn Sie also Zeile 0 entfernen, sollte Zeile 1 zu Zeile 0 werden, wird jedoch als Zeile 1 beibehalten. Wenn Sie also versuchen, Zeile 0 zu entfernen, löschen Sie Zeile 1. Sie können dies beheben, indem Sie in Ihrer ng-repeat-Anweisung track by $index verwenden .

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