Show Notification After Removing An Item From The List In Angular
I have a list of items with a delete buttons. When delete button is clicked it removes it from the list. But after clicking a delete button I would like to replace the deleted it
Solution 1:
Yes, it is possible. Assuming that the data is bind in ng-repeat with expression,
<tr data-ng-repeat="var in data">
<td data-ng-show="!data.isDeleted">{{var.Column1}}</td>
<td data-ng-show="data.isDeleted">Delete Complete</td>
</tr>
So you need to add one more property in your json data.
Solution 2:
Check this sample... It will remove the delete red flag after 3 seconds...
http://jsfiddle.net/leojavier/U3pVM/18175/
<div class="field" ng-app="App">
<table ng-controller="Controller">
<tr ng-repeat="item in table">
<td ng-class="item.style" ng-class="item.style">{{item.name}}</td>
<td><a href="javascript:void(0)" ng-click="delete(item, $index)">Delete</a></td>
</tr>
</table>
</div>
JS
var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
$scope.table = [
{name : 'Dan', deleted:false},
{name : 'Orlando'},
{name : 'Dany'}
];
$scope.delete = function(item, index){
item.deleted = true;
item.style = 'deleted';
function destroy() {
$scope.table.splice(index, 1)
}
$timeout(function(){destroy();}, 3000);
}
});
CSS
body{
font-family:arial;
}
a{
text-decoration:none;
color:red;
}
table{
width:300px;
}
td{
border:thin solid #CCC;
padding:10px;
}
tr{
position:relative
width:300px;
}
.deleted:after{
content:'DELETED';
position:absolute;
top:0;
left:0;
background:red;
width:300px;
color:#FFF;
text-align:center;
line-height:40px;
}
Post a Comment for "Show Notification After Removing An Item From The List In Angular"