Как удалить текущую запись при нажатии на кнопку «Удалить»

angularjs

226 просмотра

4 ответа

1581 Репутация автора

Я новичок в Angular-JS Пожалуйста, обратите внимание на кодирование с созданием динамических таблиц. Я добавил несколько записей, помогая с JSON Ang NG-модель, но как удалить текущую запись, когда нажмите кнопку Удалить. Проходя с этим оператором.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
	$scope.emplist = [
	                  {empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
	                  {empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
	                  {empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
	                  {empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
	                  {empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
	                  {empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
	                  {empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
	                  {empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
	                  {empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
	                  {empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
	                  ];
	$scope.addItem = function(){
		$scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});
		$scope.empname = '';
		$scope.empsalary = '';
		$scope.empid = '';
	}
	$scope.remItem = function(x){
		$scope.emplist.splice(x,1);
	}
});
body{
 	font-size: 14px;
 	font-family: Arial;
 	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>

Автор: Samudrala Ramu Источник Размещён: 19.07.2016 07:24

Ответы (4)


0 плюса

11672 Репутация автора

Попробуй это

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

и в контроллере

  $scope.remItem = function(item){
    var index = $scope.emplist.indexOf(item);
    $scope.emplist.splice(index,1);
  }
Автор: Hadi J Размещён: 19.07.2016 07:26

1 плюс

176 Репутация автора

Пожалуйста, передайте текущий индекс в вашей функции

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

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

Это поможет вам !!!

Автор: VjyV Размещён: 19.07.2016 07:31

0 плюса

211 Репутация автора

** Вы можете удалить строку на основе индекса **

 <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);}
Автор: Mahesh.P Размещён: 19.07.2016 07:36

2 плюса

124 Репутация автора

Решение

Вместо того, чтобы показывать строку таблицы для каждой записи, используйте 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>

А внутри контроллера вы можете получить $ index

$scope.remItem = function(itemIndex){
  $scope.emplist.splice(itemIndex,1);
}
Автор: Anuradha Размещён: 19.07.2016 07:36
Вопросы из категории :
32x32