Usuń cały wiersz tabeli przycisk angularjs

Question

Mam tabelę z przykładowymi danymi. Mam przycisk, którego chcę użyć w wierszu tabeli, który usunie cały wiersz tabeli po kliknięciu. Problem w tym, że zakodowałem, usunę zawartość z wiersza tabeli i zostawię przycisk i wiersz tabeli. Lub usunie ostatniej tabeli nie wierszu wiersz przycisk został kliknięty w

Oto co mam:.

kontroler:

$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

Można użyć $index w szablonie, jak tak, aby uzyskać indeks macierz produktów.

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

Answer 2

wyjazdu to potencjalne rozwiązanie/poprawna składnia/strategia twojego problemu: http://plnkr.co/edit/Z3NTKo?p=preview

Można rozważyć uzyskanie indeksu produktów z NG-repeat, by to uczynić swój kod o wiele prostsze i powinno działać:

<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

Obie odpowiedzi są prawidłowe masz, przynajmniej oni opisują scenariuszy:

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

Następnie w sterowniku, coś takiego zrobić.

Ale mam problemy z wykorzystaniem tych implementacji. Dzieje się tak, ponieważ kątowy nie aktualizuje numeru wiersza innych elementów podczas usuwania wiersza, jeśli używasz ng-init="rowIndex = $index". Używałem go, ponieważ przycisk usuwania znajdował się w wewnętrznej pętli powtarzania. Jeśli więc usuniesz wiersz 0, wiersz 1 powinien stać się wierszem 0, ale zamiast tego będzie przechowywany jako wiersz 1, więc podczas próby usunięcia wiersza 0 faktycznie usuwasz wiersz 1. Możesz to naprawić, używając track by $index na swojej dyrektywie ng-repeat .

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