So entfernen Sie den aktuellen Datensatz beim Klicken auf Entfernen Schaltfläche

Ich bin neu für Angular-js Bitte Heip auf Codierung mit dynamischer Tabellenerstellung. Ich fügte einige Datensätze helfen mit Json Ang ng-Modell, aber So entfernen Sie den aktuellen Datensatz, wenn Sie auf Entfernen klicken Taste. Mit diesem Operator übergeben.So entfernen Sie den aktuellen Datensatz beim Klicken auf Entfernen Schaltfläche

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
\t $scope.emplist = [ 
 
\t     {empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'}, 
 
\t     {empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'}, 
 
\t     {empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'}, 
 
\t     {empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'}, 
 
\t     {empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'}, 
 
\t     {empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'}, 
 
\t     {empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'}, 
 
\t     {empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'}, 
 
\t     {empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'}, 
 
\t     {empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'} 
 
\t     ]; 
 
\t $scope.addItem = function(){ 
 
\t \t $scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid}); 
 
\t \t $scope.empname = ''; 
 
\t \t $scope.empsalary = ''; 
 
\t \t $scope.empid = ''; 
 
\t } 
 
\t $scope.remItem = function(x){ 
 
\t \t $scope.emplist.splice(x,1); 
 
\t } 
 
});

body{ 
 
    \t font-size: 14px; 
 
    \t font-family: Arial; 
 
    \t color:#333; 
 
}

<!DOCTYPE Html> 
 
<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<table style="width:100%;"> 
 
<tr height="25" style=" background: #99ff00;"> 
 
<th width="5%"></th> 
 
<th width="40%">EMP Name</th> 
 
<th width="30%">EMP Salary</th> 
 
<th width="25%">EMP ID</th> 
 
</tr> 
 
<tr height="25" ng-repeat="x in emplist"> 
 
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{$index}}</td> 
 
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{$index}}</td> 
 
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{x.empname}}</td> 
 
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{x.empname}}</td> 
 
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empsalary}}</td> 
 
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empsalary}}</td> 
 
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">&times; Remove</button></td> 
 
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">&times; Remove</button></td> 
 
</tr> 
 
<tr height="25"> 
 
<td><button ng-click="addItem();" style="background: #00ffff; border:0px; width:100%; height:100%;">Add</button></td> 
 
<td style="padding:2px;"><input type="text" ng-model="empname" style="width:100%;" ></td> 
 
<td style="padding:2px;"><input type="text" ng-model="empsalary" style="width:100%;" ></td> 
 
<td style="padding:2px;"><input type="text" ng-model="empid" style="width:100%;" ></td> 
 
</tr> 
 
</table> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-07-19 Samudrala Ramu

Statt für jeden Datensatz die Tabellenzeile zu zeigen, Verwendung ng-repeat

<tr ng-repeat="emp in emplist"> 
    <td>{{emp.name}}</td> 
    <td>{{emp.name}}</td> 
    <td>{{emp.name}}</td> 
    <td><button ng-click="remItem($index)">Remove</button></td>

Und in der Steuerung direkt Sie können den Index $

$scope.remItem = function(itemIndex){ 
    $scope.emplist.splice(itemIndex,1); 
}

Quelle

2016-07-19 07:36:30 Anuradha

Versuchen Sie, diese

<button ng-click="remItem(x);" > Remove</button>

und in der Steuerung

$scope.remItem = function(item){ 
    var index = $scope.emplist.indexOf(item); 
    $scope.emplist.splice(index,1); 
    }

Quelle

2016-07-19 07:26:59

innerhalb der ng-Repeat-Direktive erhalten, spezielle Eigenschaften ausgesetzt sind der lokale Bereich einschließlich "$ index", so dass Sie das indexOf-Element in der remove-Funktion nicht durchsuchen müssen: – etiennecrb

Sie können '$ index' nicht verwenden, wenn Sie den Filter in' ng-repeat' verwenden. –

Bitte Pass Aktuelle Index in Ihrer Funktion

<button ng-click="remItem(x,$index);" > Remove</button> 

$scope.remItem = function(x,index){ 
    $scope.emplist.splice(index,1); 
}

Es wird dir helfen !!!

Quelle

2016-07-19 07:31:06 VjyV

** Sie können die Zeile löschen, basierend auf Index **

<button title="Remove" ng-click="removeFile($index)"></button> 


$scope.removeFile = function (index) { 
    if (!confirm("Are you sure you want to remove?")) { 
     return; 
    } 
    $scope.emplist.splice(index, 1);}

Quelle

2016-07-19 07:36:00

So entfernen Sie den aktuellen Datensatz beim Klicken auf Entfernen Schaltfläche

Antwort

Verwandte Themen