AngularJs

Question

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

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

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

编辑：我添加了一个 "simulation" 的行为，jsfiddle here.

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

见improved fiddle

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

AngularJs - unable to set ng-class to a specific element according to a server response

ng-class