Odtnhj

In my application for some technical reason, we need to verify before we delete an item from a table. That mean, when an item is marked for deletion, we need to hide the Trash Icon. I have it working, but the thing is it happens for the entire Table.

I want the Delete Icon to disappear only for that specific Item.

HTML:

<td ng-if="!hideTrashIcon">
 <a popover-trigger="'mouseenter'" uib-popover="Delete" ng-click="deleteModal(t)">
 <i class="fa fa-trash" aria-hidden="true"></i>
 </a>
</td>

CTRL:

 $scope.deleteIten = function (itemName) 
 $scope.deleting = true;
 $scope.hideTrashIcon = false;

 requestAPI.deleteItem(itemName).then(function success(res) 
 $scope.deleting = false;
 $scope.hideTrashIcon = true;
 $('#delete-modal').modal('hide');
 var dItem = _.findIndex($scope.items, function(i) return i.itemName == itemName );
 $scope.items[dItem].isMarkedForDeletion = true;
 , function error(res) 
 $scope.deleting = false;
 $scope.hideTrashIcon = false;
 $('#delete-modal').modal('hide'); 
 )
 ;

Apparently, I am messing up when I am calling the property. I somehow need to pass the itemName to the hideTrashIcon. Can anyone help.??? Thanks in advance..

So, to Answer my own question. Instead of using another tag, for hideTrashIcon, I used this:

ng-if="!t.isMarkedForDeletion"

I also, put it in a span, to avoid having the line in the table disappear.

It’s possible you have spelling error in first line, did you mean to use “deleteIten”?

$scope.deleteIten = function (itemName) {

ng-if="!hideTrashIcon && !$scope.items[$index].isMarkedForDeletion"

Use the $index of the item in the ng-repeat of $scope.items as you generate the table rows.