仅将 ng-repeat 中的 ng-if 应用于所选项目

Question

我正在使用 Ionic Framework 开发跨浏览器应用程序。我设置了主从模式页面。我的详细信息页面上有三个项目。当我删除其中一项时，我想使用 ng-if 指令从 DOM 中删除一条消息 -div，但只有在用户单击 "Yes" 按钮之后ionicPopup 确认屏幕。目前我可以更改所有三个项目，但我很难弄清楚如何仅将更改附加到所选项目。代码如下：

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);
                }
            }
        ]
    })

目前，列号打印正确。正在传递值。我只是想不出将列号正确附加到 ng-if 的语法。任何帮助将不胜感激。

Answer 1

您正在将列传递给 deleteHours 函数，为什么不将 pendingDeletion 属性附加到详细信息？

<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);
                }
            }
        ]
    })

仅将 ng-repeat 中的 ng-if 应用于所选项目

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

angularjs

ng-repeat

angular-ng-if