When displaying data using ng-repeat, there is a button to delete each item. Upon deleting an item, the delete button should only disappear for the specific item that was deleted.
<tr ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate | filter:{state: 'archived'}: archived.state ? true : false">
<td id="outmouse">
<ul style="list-style: none;" class="gt-reset">
<li class="dropdown changecoursename">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="tableOperation norlmalstate">Open Course</span>
<span class="tableOperation openedstate">more options</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a class="tableOperation" ng-click="paymentRemarks()">Remarks</a></li>
<li><a class="tableOperation" ng-click="paymentReturn(paymentinfo)">Return</a></li>
<li ng-switch on="paymentinfo.state">
<div ng-switch-when="archived" class="archived__state">{{paymentinfo.state}}</div>
<a ng-switch-default class="tableOperation" ng-click="paymentDelete();">{{deletebtn}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
The location where deletion needs to occur:
<li ng-switch on="paymentinfo.state">
<div ng-switch-when="archived" class="archived__state">{{paymentinfo.state}}</div>
<a ng-switch-default class="tableOperation" ng-click="paymentDelete();">{{deletebtn}}</a>
</li>
My JavaScript code:
$scope.datas = [{
date: '06-12-2016',
name: 'Pinao Class',
state: 'archived',
remark: 'remarked',
amount: 101,
id: 21
}, {
date: '15-04-2016',
name: 'drivers Class',
state: 'notarchived',
remark: 'remarked',
amount: 102,
id: 22
}];
$scope.paymentList = $scope.datas;
$scope.deletebtn = "delete";
$scope.paymentDelete = function() {
$scope.www = true;
$scope.deletebtn = false;
}
Issue with my code: It deletes all elements instead of just the selected one.