【问题标题】:How can I edit an item in a list without changing the whole list?如何在不更改整个列表的情况下编辑列表中的项目?
【发布时间】:2016-08-09 22:13:06
【问题描述】:

我有一份可能被标记的讨论列表。但是目前,当用户单击标记按钮时,会为所有项目触发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>

js:

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

【问题讨论】:

    标签: javascript angularjs angularjs-scope ng-switch


    【解决方案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;
    };
    

    【讨论】:

    • 您能否进一步解释或举个例子,不太清楚您的意思,谢谢!
    【解决方案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;
    };
    

    【讨论】:

      猜你喜欢
      • 2021-02-08
      • 2018-04-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-05
      • 1970-01-01
      • 1970-01-01
      • 2015-10-24
      相关资源
      最近更新 更多