Supprimer toute la ligne de la table angularjs bouton

J'ai un tableau avec des exemples de données. J'ai un bouton que je veux utiliser dans la ligne de la table qui permet de supprimer l'ensemble de la ligne de la table lorsque l'utilisateur clique dessus. Problème est ce que j'ai codé jusqu'allons supprimer le contenu de la ligne de la table et laissez le bouton et la rangée de table. Ou il va supprimer la dernière ligne de la table pas de la ligne que le bouton a été cliqué.

Voici ce que j'ai :

contrôleur :

    $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>
Article détaillé de la suppression de la table sélectionnée ligne dans AngularjS codepedia.info/angularjs-delete-table-row-tr-on-click

OriginalL'auteur Troy Bryant | 2014-12-22

  1. 22

    Vous pouvez utiliser $index dans le modèle, comme dans l'ordre pour obtenir l'index de la gamme de produits. 

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

    Puis dans le contrôleur de, faire quelque chose comme ceci:

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

    OriginalL'auteur reptilicus

  2. 3

    Découvrez cette solution potentielle /corriger la syntaxe et de la stratégie à votre problème: http://plnkr.co/edit/Z3NTKo?p=preview

    Vous pourriez envisager de faire l'index des produits de la ng-repeat, ce serait faire de votre code beaucoup plus simple et devrait fonctionner:

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

    OriginalL'auteur wbeange

  3. 1

    Les deux réponses que vous avez eu sont correct, au moins sur les scénarios qu'ils décrivent.

    Mais j'ai connu des problèmes à l'aide de ces implémentations. C'est parce angulaire de ne pas mettre à jour le numéro de ligne de l'autre les éléments lorsque vous supprimez une ligne si vous utilisez ng-init="rowIndex = $index". Je l'utilise parce que le bouton supprimer est sur un intérieur ng-repeat boucle. Donc, si vous supprimez la ligne 0, la ligne 1 devrait devenir la ligne 0, mais plutôt qu'il est gardé comme la ligne 1, de sorte que lorsque vous essayez de supprimer la ligne 0 vous sont effectivement en supprimant ligne 1. Vous pouvez résoudre ce problème en utilisant track by $index sur votre ng-repeat directive.

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

    OriginalL'auteur Danielo515