AngularJs - 无法根据服务器响应将ng-class设置为特定元素

Question

我在我的应用程序中使用 ng-class 将一些样式动态设置为单击的元素，具体取决于服务器的响应。到目前为止，我只能一次将样式设置为由ng-repeat生成的所有元素（我猜是由于相同的范围？），而不仅仅是单击的元素。

我在这里阅读，但无法将其与服务器的动态响应相结合。

场景是以下未知数量的项目，每个项目有两个按钮，publish和unpublish。根据用户选择，样式仅设置为publish按钮（unpublish从数据库中删除某些内容并将类设置为此按钮btn-publish而单击publish将项目添加到数据库并将publishedBtn类设置为publish按钮）。

编辑：我在这里添加了行为的"模拟"jsfiddle。

.HTML：

<div ng-repeat="item in items">
  <button class="btn btn-publish" ng-click="publish(item.id)" ng-class="(pub==true) ? 'publishedBtn' : 'btn-publish'">publish</button>
  <button class="btn btn-publish" ng-click="unPublish(item.id)">unpublish</button>
</div>

JS代码：

$scope.publish = function(postId) {
  $http({
    url: "someUrl",
    method: "POST",
    headers:{'someHeader'},
    data: $.param({publish: postId})
  }).success(function(data, status, headers, config) {
    if ($.trim(data) == "published") {
      $scope.pub = true;
      console.log("published");
    }
  }).error(function(data, status, headers, config) {});
}

$scope.unPublish = function(postId){
        $http({
        url: "someUrl",
        method: "POST",
        headers:{'someHeader'},
        data: $.param({unPublish:postId})
    }).success(function(data, status, headers, config) {
        if($.trim(data)!="published"){ 
            $scope.pub = false;
            console.log("un-published");
        }
    }).error(function(data, status, headers, config) {});
}

有什么想法吗？

Answer 1

这不是

ng-class的工作方式。如果你想正确使用它，你的HTML应该看起来像：

<button class="btn" ng-click="publish(item.id)" ng-class="{'publishedBtn': pub,'btn-publish': !pub}">publish</button>

编辑
现在我更好地理解了这个问题，这里有一个完整的解决方案。
所有发布按钮都发生了更改的原因与您猜测的原因是：您将pub值保存在作用域上。解决方案很简单：将其保存在项目上。
请考虑以下解决方案：.HTML：

<div ng-repeat="item in items">
  <button class="btn btn-publish" ng-click="publish(item)" ng-class="{'publishedBtn': item.pub,'btn-publish': !item.pub}">publish</button>
  <button class="btn btn-publish" ng-click="unPublish(item)">unpublish</button>
</div>

JS代码：

$scope.publish = function(item) {
  $http({
    url: "someUrl",
    method: "POST",
    headers:{'someHeader'},
    data: $.param({publish: item.id})
  }).success(function(data, status, headers, config) {
    if ($.trim(data) == "published") {
      item.pub = true;
      console.log("published");
    }
  }).error(function(data, status, headers, config) {});
}

$scope.unPublish = function(item){
    $http({
    url: "someUrl",
    method: "POST",
    headers:{'someHeader'},
    data: $.param({unPublish:item.id})
  }).success(function(data, status, headers, config) {
    if($.trim(data)!="published"){ 
        item.pub = false;
        console.log("un-published");
    }
  }).error(function(data, status, headers, config) {});
}

查看改进的小提琴