AngularJs - невозможно установить ng-класс для определенного элемента в соответствии с ответом сервера

Я использую 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) {});
}

Любые идеи?


angularjs ng-class
person Alex    schedule 18.02.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

См. улучшенную скрипку.

person Yaron Schwimmer    schedule 18.02.2016
comment
Спасибо за ответ, но похоже, что стиль применяется ко всем элементам. - person Alex; 18.02.2016
comment
Есть ли способ создать демонстрацию (plunker/fiddle), чтобы проиллюстрировать проблему? - person Yaron Schwimmer; 18.02.2016
comment
Большое спасибо, это именно то, чего я пытался достичь. Любые советы\мысли о том, как я должен планировать и разрабатывать свой код в следующий раз? И можно ли использовать item.publish внутри ng-class для применения класса при загрузке страницы? - person Alex; 18.02.2016