тумблер ngclass OnClick с angularjs

Question

Я хочу изменить класс кнопки, когда она нажата, а также обратный обратно в прежнее состояние, когда его нажмите снова

$scope.like_btn = "icon ion-ios-heart"; 
$scope.like_btn2 = "icon ion-ios-heart assertive"; 
$scope.likepic=function() { 
    event.preventDefault(); 
    if ($scope.like_btn === "icon ion-ios-heart"){ 
     $scope.like_btn = "icon ion-ios-heart assertive"; 

     $http.post("http://localhost/mywork/scripts/like.php", 
     {'u_pic_id':$scope.u_pic_id}) 
     .success(function(data){ 
     console.log(data) 
     }); 
     } 

    else { 
    $scope.like_btn = "icon ion-ios-heart assertive"; 
    $scope.like_btn = "icon ion-ios-heart"; 
    $http.post("http://localhost/mywork/scripts/like_delete.php", 
    {'u_pic_id':$scope.u_pic_id}) 
    .success(function(data){ 
    console.log(data) 
     }); 
    } 
    } 

HTML

<a href="#" ng-click="likepic()">Click to like</a> 

<i ng-class="{ '{{like_btn}}': item.answer==='no liked','{{like_btn2}}':item.answer=='liked' }" ></i> {{item.love_total}} Likes 

Answer 1

Ваш " элемент ", вероятно, не будет обновляться после успешного завершения службы. Так один способ добавить следующие к контроллеру:

$scope.item.isLiked = false; // or initiase it with item.isLiked 
$scope.likepic=function(item) { 
    item.isLiked = item.isLiked; 
    ... 
    ...  
} 

Изменение углового выражения на следующее:

<i ng-click="likepic(item)" ng-class="{ '{{like_btn}}': item.answer=='no liked','{{like_btn2}}': item.answer=='liked' }" ></i> 

Вам необходимо обновить varible имена немного.

Answer 2

Поскольку я смотрю на ваше дело, единственное изменение с onclick заключается в том, что вы добавляете класс «assertive». Ниже будет подход.

Изменения в HTML Вид:

<a href="#" ng-click="likepic()">Click to like</a> 
<i class="icon ion-ios-heart" ng-class="{'assertive': liked}" ></i> {{item.love_total}} Likes 

Изменения Javascript

// Initialize the flag here 
$scope.liked = false; 

$scope.likepic = function() { 
    event.preventDefault(); 
    // Toggle the flag here 
    $scope.liked = !$scope.liked; 
    // Then perform task as per the new value 
    // There is some possibility of optimization below too. But since that is not the question, no changes are done here 
    if ($scope.liked) { 
     $http.post("http://localhost/mywork/scripts/like.php", { 'u_pic_id': $scope.u_pic_id }) 
      .success(function(data) { 
       console.log(data) 
      }); 
    } else { 
     $http.post("http://localhost/mywork/scripts/like_delete.php", { 'u_pic_id': $scope.u_pic_id }) 
      .success(function(data) { 
       console.log(data) 
      }); 
    } 
}