Показывать уведомление после удаления элемента из списка в угловых

Question

Показывать уведомление после удаления элемента из списка в угловых

0

У меня есть список элементов с кнопками удаления. При нажатии кнопки удаления она удаляется из списка.

Но после нажатия кнопки удаления я хотел бы заменить удаленный элемент сообщением "Удалить завершено".

Это возможно?

RSM 26 авг. 2015, в 05:32

Источник

0

Хотите, чтобы «Удалить завершено» всегда оставалось на странице до тех пор, пока страница / данные не будут обновлены?
keithm 26 авг. 2015, в 03:28
0

одним из способов было бы оставить элемент в массиве, добавить к нему deleted свойство и использовать директиву или ng-class или ng-if для изменения отображения
charlietfl 26 авг. 2015, в 03:51

Теги:

javascript

angularjs

angularjs-ng-repeat

2 ответа

1

Да, это возможно. Предполагая, что данные связаны с ng-repeat с выражением,

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

Поэтому вам нужно добавить еще одно свойство в ваши json-данные.

J Doe 26 авг. 2015, в 01:49

Ещё вопросы

Хотите, чтобы «Удалить завершено» всегда оставалось на странице до тех пор, пока страница / данные не будут обновлены?
одним из способов было бы оставить элемент в массиве, добавить к нему deleted свойство и использовать директиву или ng-class или ng-if для изменения отображения

Leo Javier · Accepted Answer · 2015-08-26T01-53-00.000Z

Проверьте этот образец... Он удалит красный флаг удаления через 3 секунды...

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/