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

问题描述

我有一个删除的按钮的项目的列表。当点击删除按钮，它从列表中删除。

但点击删除按钮后，我想与信息删除完成，以取代被删除的项目。

这可能吗？

解决方案

勾选此样本...
在3秒后它会删除的删除红旗...

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

 ＆LT; D​​IV CLASS =字段NG-应用=应用程序＆GT;
    ＆LT;表NG-控制器=控制器＆GT;
        ＆LT; TR NG重复=项目表＆GT;
            ＆LT; TD NG-CLASS =item.styleNG-CLASS =item.style＆GT; {{item.name}}＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT; A HREF =JavaScript的：无效（0）NG点击=删除（项目，$指数）＆GT;删除＆LT; / A＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; / DIV＆GT;
 

JS

  VAR应用= angular.module（'应用'，[]）;
App.controller（'控制'，函数（$范围，$超时）{
    $ scope.table = [
        {名称：'丹'，删除：假}，
        {名称：'魔术'}，
        {名称：'丹尼'}
   ];    $ scope.delete =功能（项指数）{
        item.deleted =真;
        item.style ='删除';        功能的destroy（）{
        $ scope.table.splice（指数，1）
        }        $超时（函数（）{销毁（）;}，3000）;
    }
}）;
 

CSS

  {体
    FONT-FAMILY：宋体;
}
一个{
    文字修饰：无;
    颜色：红色;
}表{
宽度：300像素;
}TD {
    边框：细实#CCC;
    填充：10px的;}TR {
 位置：相对
     宽度：300像素;
}.deleted：{后
    内容：已删除;
    位置：绝对的;
    顶部：0;
    左：0;
    背景：红色;
    宽度：300像素;
    颜色：#FFF;
    文本对齐：中心;
    行高：40像素;
}
 

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屋！