Question

我正在使用Ionic Framework开发跨浏览器应用。我有一个Master-Detail模式页面。我的详细信息页面上有三个项目。当我删除其中一个项目时，我想使用ng-if指令从DOM中删除message-div，但只有在用户点击了＆＃34;是＆＃34; 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应用于所选项目

1 个答案: