僅在 ng-repeat 中將 ng-if 應用於所選項目 (Apply ng-if in ng-repeat only to selected item)

問題描述

僅在 ng‑repeat 中將 ng‑if 應用於所選項目 (Apply ng‑if in ng‑repeat only to selected item)

我正在開發一個使用 Ionic 框架的跨瀏覽器應用程序。我設置了主從模式頁面。我的詳細信息頁面上有三個項目。當我刪除其中一項時，我想使用 ng‑if 指令從 DOM 中刪除一個 message‑div，但前提是用戶單擊了 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 的語法。任何幫助將不勝感激。

參考解法

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

(by L. Dragoon、maschwenk)

參考文件

1. Apply ng‑if in ng‑repeat only to selected item (CC BY‑SA 2.5/3.0/4.0)