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,

<trdata-ng-repeat="var in data"><tddata-ng-show="!data.isDeleted">{{var.Column1}}</td><tddata-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/

<divclass="field"ng-app="App"><tableng-controller="Controller"><trng-repeat="item in table"><tdng-class="item.style"ng-class="item.style">{{item.name}}</td><td><ahref="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';

        functiondestroy() {
        $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;
}

http://jsfiddle.net/leojavier/U3pVM/18175/