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

时间:2016-08-09 22:13:07

标签: javascript angularjs angularjs-scope ng-switch

我有一份可能被标记的讨论列表。目前,当用户点击标志按钮时,会为所有项目触发T,而不仅仅是标记的项目,您需要刷新页面以标记其他讨论。我怎么能拥有它,只有被点击的讨论才会改变,而不是每次讨论。

由于scope inheritance

,我有isflagged

HTML:

scope.dis

JS:

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

2 个答案:

答案 0 :(得分:1)

$scope.dis对于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;
};

答案 1 :(得分:1)

我会在每个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;
};