以角度从列表中删除项目后显示通知 [英] Show notification after removing an item from the list in angular

问题描述

我有一个带有删除按钮的项目列表.单击删除按钮时，会将其从列表中删除.

但在单击删除按钮后，我想用删除完成"消息替换已删除的项目.

这可能吗?

解决方案

检查此示例...它会在 3 秒后移除删除红旗...

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

<table ng-controller="控制器"><tr ng-repeat="表中的项目"><td ng-class="item.style" ng-class="item.style">{{item.name}}</td><td><a href="javascript:void(0)" ng-click="delete(item, $index)">删除</a></td></tr>

JS

var App = angular.module('App', []);App.controller('Controller', function($scope, $timeout){$scope.table = [{name : 'Dan', 删除:false},{名称:'奥兰多'}，{名称:'丹妮'}];$scope.delete = function(item, index){item.deleted = true;item.style = '删除';函数销毁(){$scope.table.splice(索引，1)}$timeout(function(){destroy();}, 3000);}});

CSS

body{字体系列:arial;}一种{文字装饰:无；红色;}桌子{宽度:300px；}td{边框:薄实心#CCC；填充:10px；}tr{职位:相对宽度:300px；}.删除:之后{内容:'已删除';位置:绝对；顶部:0;左:0;背景:红色；宽度:300px；颜色:#FFF；文字对齐:居中；行高:40px；}

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

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 item with a message "Delete Complete".

Is this possible?

解决方案

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;
}

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

这篇关于以角度从列表中删除项目后显示通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！