CODEWITHSUNDEEP
javascriptangularjs
Andrew
Andrew

Reputation: 199

AngularJs - Bookmark button with Angular

I want to create a bookmark button with angularjs and I have marks table to store that, also a Json file that contain all of the posts.

HTML:

// Using angular ng-repeat loops over the posts.
<button ng-click="ajax( 'storeBookmark', post.id, post.mark.disable);" ng-init="hasMark = post.mark.disable">
  <span ng-show="hasMark" class='coreSpriteBookmarkFull32'></span>
  <span ng-hide="hasMark" class='coreSpriteBookmarkOpen32'></span>
</button>

Angular Factory

app.factory('posts', ['$http', function($http) {
  return $http.get('http://localhost/index.php/q')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
}]);

Angular Controller:

app.controller('WallController', ['$scope',"$http", 'posts', function($scope,$http, posts) {
  $scope.hasMark = false;
  posts.success(function(data) {
    $scope.posts = data.factory.data;
    $scope.user = data.user;
  });
  $scope.ajax = function(store,post_id,disable){
    $http.post('http://localhost/index.php/question/'+post_id+'/'+store)
      .success(function (data) {
        $scope.hasMark = !disable; //*** this is the problem!
      });       
  }
}]);

But it's not work, I tried another ways too but it is best of them! What's your idea?

Upvotes: 0

Views: 1110

Answers (2)

Andrew
Andrew

Reputation: 199

Finally i found the answer! simple, but it's work as i want, I removed useless variable hasMark and ng-init, and i changed the value post.mark.disable after ajax function on ng-click. Any way it's work perfectly!

HTML

<button class="-hhn-PRIVATE-Button__root -hhn-PRIVATE-Button__bookmark">
  <div ng-click="ajax('storeBookmark', post.id, post.mark.disable ); post.mark.disable = !post.mark.disable;" >
    <span ng-show="post.mark.disable" class='coreSpriteBookmarkFull32'></span>
    <span ng-hide="post.mark.disable" class='coreSpriteBookmarkOpen32'></span>
  </div>
</button>

Controller

app.controller('WallController', ['$scope',"$http", 'posts', function($scope,$http, posts) {

  posts.success(function(data) {
    $scope.posts = data.factory.data;
    $scope.user = data.user;
  });
  $scope.Lang = window.Lang;
  $scope.ajax = function(store,post_id,disable){
    $http.post('http://localhost/index.php/question/'+post_id+'/'+store)
      .success(function (data) {
        // nothing!
      });
  }

}]);

Upvotes: 0

ArBro
ArBro

Reputation: 731

I think its in the $scope.hasMark = !disable; statement as you already suggested. I think you should change the following:

In your success call-back function:

$scope.hasMark = !$scope.hasMark;

Also make sure that $posts.mark.disable exists on the $scope.

I have made a simplified Plnkr to show what I mean: Plnkr

Upvotes: 1

Related Questions