Применить ng-if в ng-repeat только к выбранному элементу

Question

Я работаю над кросс-браузерным приложением, использующим Ionic Framework. У меня есть страница шаблона Master-Detail. У меня есть три пункта на моей странице с подробными сведениями. Когда я удаляю один из элементов, я хочу удалить div-сообщение из DOM с помощью директивы ng-if, но только после того, как пользователь нажал кнопку «Да» на экране подтверждения 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); 
       } 
      } 
     ] 
    })