Как редактировать элемент в списке без изменения всего списка?

Question

У меня есть список дискуссий, которые могут быть помечены. В настоящее время, однако, когда пользователь нажимает кнопку флага, isflagged запускается для всех элементов, а не только для элемента, который был помечен, вам нужно обновить страницу, чтобы отметить другие обсуждения. Как бы мне это сделать, чтобы изменения, происходящие только в ходе обсуждения, не были обсуждены.

У меня есть scope.dis из-за scope inheritance

HTML:

<li ng-repeat="discussion in Discussions"> 
    <div ng-if="canFlag(discussion)"> 
     <div ng-switch="dis.isFlagging"> 
      <div ng-switch-when="false" 
       ng-click="flagDiscussion(discussion.id)" 
      </div> 
      <div ng-switch-when="true"> 
       Successfully flagged</div> 
     </div> 
    </div> 
</li> 

ЯШ:

$scope.dis = {isFlagging: false}; 
$scope.flagDiscussion = function(discussionId) { 
    Service.flagDiscussion(discussionId); 
    $scope.dis.isFlagging = true; 
}; 

Answer 1

$scope.dis является общим для ALLL discussions. Чтобы следить за помехой обсуждения, сохраните карту или добавьте свойство в дискуссию.

Что-то вроде этого:

<div ng-switch="discussion.isFlagging"> 
    <div ng-switch-when="false" ng-click="flagDiscussion(discussion)" /> 
    <div ng-switch-when="true">Successfully flagged</div> 
</div> 

$scope.flagDiscussion = function(discussion) { 
    Service.flagDiscussion(discussion.id); 
    discussion.isFlagging = true; 
}; 

Answer 2

я бы следить за этим в каждом отдельном discussion объекта. Вы случайно установили его так, чтобы существовал только один $scope.dis, поэтому он относится ко всем элементам. Отслеживание isFlagging статуса на индивидуальной основе, как это:

HTML:

<li ng-repeat="discussion in Discussions"> 
<div ng-if="canFlag(discussion)"> 
    <div ng-switch="discussion.isFlagging"> 
     <div ng-switch-when="false" 
      ng-click="flagDiscussion(discussion)"> 
     </div> 
     <div ng-switch-when="true"> 
      Successfully flagged</div> 
     </div> 
    </div> 
</li> 

JS:

$scope.flagDiscussion = function(discussion) { 
    Service.flagDiscussion(discussion.id); 
    discussion.isFlagging = true; 
};