如何在不更改整个列表的情况下编辑列表中的项目？

Question

我列出了可能被举报的讨论列表。 目前然而，当用户点击一个标志按钮时， isflagged触发所有项目，而不是只是被标记，则需要刷新页面来标记其他讨论的项目。 我将如何拥有它，以便仅更改被单击的讨论，而不是所有讨论。

由于范围继承，我有了scope.dis

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>

JS：

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

Answer 1

$scope.dis在所有discussions $scope.dis常见。 为了跟踪讨论的标记，请保留地图或在讨论中添加属性。

像这样：

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