How to show/hide a specific element?

Question

Angular

Hello!
How to make the loading image show only for a specific element, and not for all.

<ul class="service_list" id="serviceList">
                <li class="li_service" ng-repeat="service in selectedCategory.services">
                    <a href="#/catalog/{{selectedCategory.id}}/{{service.id}}" class="a_service">
                        <b>{{service.name}}</b>
                    </a>
                    <i class="delete_service_catalog" ng-model="deleteStatus" ng-click="deleteService($index, $event)" ng-hide="deleteStatus" title="Удалить сервис"></i>
                    <i id="service_{{$index}}" class="delete_service ajax_mini" ng-show="deleteStatus"></i>
                    <span id="star_{{$index}}" class="star" ng-class="{'on' : service.favorite}" ng-hide="deleteStatus" ng-click="addToFavorite($index)"></span>
                </li>
            </ul>

$scope.deleteService = function(index, event)
        {
            $scope.deleteStatus = false;
            if(confirm("Вы уверены, что хотите удалить сервис?"))
            {
                $scope.deleteStatus = true;
                return false

When the deleteService function is triggered, the tag is displayed for all elements, but I need it to be displayed only for the one I am deleting.

Answer 1

Each item in the selectedCategory.services array must have a deleteStatus flag.
Total:

$scope.deleteService = function(index, event)
        {
            $scope.selectedCategory.services[index].deleteStatus = false;
            if(confirm("Вы уверены, что хотите удалить сервис?"))
            {
                $scope.selectedCategory.services[index].deleteStatus = true;
                return false;
            }