Apply ng-if in ng-repeat only to selected item

Question

I'm working on a cross-browser app utilizing Ionic Framework. I have a Master-Detail pattern page set up. I have three items on my Detail page. When I delete one of the items, I want to remove a message-div from the DOM using an ng-if directive, but only after the user has clicked the "Yes" button in the ionicPopup Confirmation screen. Currently I can change all three items but I am having a terrible time figuring out how to attach the change to only the selected item. Code below:

Detail.html:

<ion-view title="Events" cache-view="false">
<ion-content has-header="true" padding="false">
    <div class="list card" ng-repeat="details in tag.Activity track by $index">
        <div ng-if="!deletedItem">
            This item will be deleted.
        </div>
        <div class="item item-divider item-stable" ng-click="toggleGroup(details)" ng-class="{ active: isGroupShow(details) }">
            <i class="icon" ng-class="isGroupShown(details) ? 'ion-arrow-down-b' : 'ion-arrow-right-b'"></i>
            &nbsp;
            {{ details.ActivityName }}
        </div>
        <div class="item-body item-accordion" ng-show="isGroupShown(details)">
            <label class="item">
                <span class="input-label item-stacked-label">Hours</span>
                <input type="hours" value="{{ details.Hours}}">
            </label>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" ng-click="deleteHours($index, details.RecordID)">
                <i class="icon ion-close-circled"></i>
                Delete Hours
            </a>
        </div>

    </div>
</ion-content>

Controller.js:

$scope.deleteHours = function(column,id){
    $ionicPopup.confirm({
        title: "<b>Delete Hours</b>",
        template: "Are you sure you want to delete these hours?",
        buttons: [
            { text: 'Cancel', onTap: function(e) { return true; } },
            {
                text: "<b>I'm sure</b>",
                type: 'button-positive',
                onTap: function(e) {
                    $scope.deletedItem = true;
                    console.log("Column: " + column);
                }
            }
        ]
    })

Currently, the column number prints correctly. The values are being passed. I just can't figure out the syntax to correctly attach the column number to the ng-if. Any help would be appreciated.

Answer 1

You are passing the column into the deleteHours function, why not just attach a pendingDeletion property to the detail?

<ion-view title="Events" cache-view="false">
<ion-content has-header="true" padding="false">
    <div class="list card" ng-repeat="details in tag.Activity track by $index">
        <div ng-if="details.pendingDeletion">
            This item will be deleted.
        </div>
        <div class="item item-divider item-stable" ng-click="toggleGroup(details)" ng-class="{ active: isGroupShow(details) }">
            <i class="icon" ng-class="isGroupShown(details) ? 'ion-arrow-down-b' : 'ion-arrow-right-b'"></i>
            &nbsp;
            {{ details.ActivityName }}
        </div>
        <div class="item-body item-accordion" ng-show="isGroupShown(details)">
            <label class="item">
                <span class="input-label item-stacked-label">Hours</span>
                <input type="hours" value="{{ details.Hours}}">
            </label>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" ng-click="deleteHours($index, details)">
                <i class="icon ion-close-circled"></i>
                Delete Hours
            </a>
        </div>

    </div>
</ion-content>

controller.js

$scope.deleteHours = function(column,detail){
    //pass detail, not record id. you can change this if you want to do information hiding.
    $ionicPopup.confirm({
        title: "<b>Delete Hours</b>",
        template: "Are you sure you want to delete these hours?",
        buttons: [
            { text: 'Cancel', onTap: function(e) { return true; } },
            {
                text: "<b>I'm sure</b>",
                type: 'button-positive',
                onTap: function(e) {
                    detail.pendingDeletion = true; //attach to detail
                    console.log("Column: " + column);
                }
            }
        ]
    })