wie die Zeile der Tabelle mit Textbox zu entfernen, indem die entsprechende Schaltfläche Entfernen klicken

Ich habe eine Schaltfläche Hinzufügen, die die Zeile mit texbox hinzufügt. Ich möchte jedoch die Zeile der Tabelle entfernen, indem Sie auf die entsprechende Schaltfläche zum Entfernen klicken. der Ansichtsseite Code ist wie folgt:wie die Zeile der Tabelle mit Textbox zu entfernen, indem die entsprechende Schaltfläche Entfernen klicken

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>showintable</title> 
    <script src="~/scripts/jquery-3.1.1.min.js"></script> 
    <script src="~/scripts/angular.min.js"></script> 
    <script src="~/scripts/angular-messages.min.js"></script> 
    <script src="~/app/controller/checkCtrl.js"></script> 
    <script src="~/app/filter/filterrange.js"></script> 
</head> 
<body ng-app="app"> 
    <div ng-controller="sayCtrl"> 
     <table border="1"> 
      <tr> 
       <th>S. No.</th> 
       <th>Textbox1</th> 
       <th>Texbox2</th> 
      </tr> 
      <tr ng-repeat="v in [] | range:tellrange"> 
       <td>{{$index+1}}</td> 
       <td><input type="text" ng-model="Namemodel[$index]" /></td> 
       <td><input type="text" ng-model="Addressmodel[$index]" /></td> 
       <td><input type="button" ng-click="subtractrow()" value="Remove" /></td> 
      </tr> 
      <tr><td align="right" colspan="4"><input ng-click="addrow()" type="button" value="Add" /></td></tr> 
     </table> 
    </div> 
</body> 
</html>

Der Controller checkCtrl.js von AngularJS ist wie folgt:

angular.module('app', ['ngMessages']).controller('sayCtrl', SayController); 
SayController.$inject = ['$scope', '$http']; 
function SayController($scope, $http) { 
    $scope.Namemodel = []; 
    $scope.Addressmodel = []; 
    $scope.tellrange = 1; 
    $scope.addrow = function() { 
     $scope.tellrange = $scope.tellrange + 1; 
    }; 
    $scope.subtractrow = function() { 

    }; 
}

Die Filter filterrange.js von AngularJS ist wie folgt:

angular.module('app').filter('range', function() { 
    return function (input, total) { 
     total = parseInt(total); 

     for (var i = 0; i < total; i++) { 
      input.push(i); 
     } 

     return input; 
    }; 
});

Die Seite sieht so aus:

https://drive.google.com/open?id=0B8ZNi-QTxOOYUjNqcnlraDVydVE

Ich habe danach gesucht, aber ich konnte nicht die entsprechende Antwort. Jede Hilfe wird geschätzt. Vielen Dank im Voraus ..............

Quelle

2017-03-19 Hani Abidi

Zuerst macht es einfacher, durch die Reihen zu durchlaufen. Sie wollen N Zeilen, und jede Zeile sollte zwei Informationen haben: einen Namen und eine Adresse.

verwenden also nicht zwei Arrays. Verwenden Sie ein Array von Zeilen, wobei jede Zeile einen Namen und eine Adresse:

$scope.rows = [ 
    { 
    name: 'name 1', 
    address: 'address 1' 
    }, 
    { 
    name: 'name 2', 
    address: 'address 2' 
    } 
];

Um eine Zeile hinzufügen, alles, was Sie brauchen, ist

$scope.rows.push({ 
    name: '', 
    address: '' 
});

auf die Zeilen iterieren, alles, was Sie Notwendigkeit ist

<tr ng-repeat="row in rows"> 
    <td>{{$index+1}}</td> 
    <td><input type="text" ng-model="row.name" /></td> 
    <td><input type="text" ng-model="row.address" /></td> 
    <td><input type="button" ng-click="removeRow(row)" value="Remove" /></td> 
</tr>

Wie Sie sehen, was Sie brauchen was Reihe passieren in Ihrem removeRow Funktion zu entfernen.

Und die Zeile zu entfernen, alles, was Sie brauchen, ist sein Index in $ scope.rows zu finden und entfernen Sie diesen Index:

$scope.removeRow = function(row) { 
    var index = $scope.rows.indexOf(row); 
    $scope.rows.splice(index, 1); 
}

ich nicht genau weiß, was jede Zeile darstellen soll. Ich denke, es könnte ein Benutzer beispielsweise sein, so fühlen sich frei Zeilen Benutzer umbenennen, und die Reihe an Benutzer. Dinge zu benennen und ein gutes, korrektes Modell zu haben, ist der Schlüssel. Ihre Seite zeigt eine Tabelle mit Benutzern an. Nicht zwei Tabellen mit Namen und Adressen.

Quelle

2017-03-19 14:42:53

wie die Zeile der Tabelle mit Textbox zu entfernen, indem die entsprechende Schaltfläche Entfernen klicken

Antwort

Verwandte Themen