AngularJs - Bookmark button with Angular

Question

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?

possible duplicate? Check http://stackoverflow.com/questions/29586075/add-a-bookmark-page-button-with-angular — Amos Bordowitz, Aug 24 '15 at 18:12
@AmosBordowitz - I check that before, but my code is diffrent. isn't it? — Andrew, Aug 24 '15 at 18:23

ArBro · Answer 1 · 2015-08-24T19:09:56.977

1

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

edited Aug 24 '15 at 19:09

answered Aug 24 '15 at 18:24

ArBro

731
5
18

I tried that before, It seems simple but i don't know why it doesn't work as i want!? – Andrew Aug 24 '15 at 18:39
I updated my answer a bit. Are you sure that all properties you refer to in your HTML exists on the scope? – ArBro Aug 24 '15 at 19:10
I updated my question a bit! I think ng-init prevent define new value for hasMark. what's your opinion? – Andrew Aug 24 '15 at 19:35
I don't think that ng-init is the issue the way its, defined. If you check my plunker (see my answer) you can see that its working fine as long as post.mark.disable has a value either true or false. Last thing is important to get it work. Can you check if that property exists on your scope? – ArBro Aug 24 '15 at 19:42
Thanks for your time about this issue, I tried your answer but it's not work as i want, i found the answer, check it. its simple but work good! – Andrew Aug 24 '15 at 22:27

score 0 · Accepted Answer · answered Aug 24 '15 at 22:18

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

}]);

AngularJs - Bookmark button with Angular

2 Answers2