AngularJs - 带有角度的书签按钮

我想创建一个带有angularjs的书签按钮，我有标记表来存储它，也是一个包含所有帖子的Json文件。AngularJs - 带有角度的书签按钮

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>

角厂

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

角控制器：

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

但它不是WO rk，我尝试了另一种方法，但它是最好的！你的想法是什么？

来源

2015-08-24 Andrew

可以复制？检查http://stackoverflow.com/questions/29586075/add-a-bookmark-page-button-with-angular –

@AmosBordowitz - 我检查之前，但我的代码是不同的。不是吗？ – Andrew

终于让我找到了答案！简单，但它的工作因为我想，我删除无用变量hasMark和ng-init，并且我改变了值post.mark.disable之后，在ng-click上的ajax函数。任何方式，它是完美的工作！

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>

控制器

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

}]);

来源

2015-08-24 22:18:25 Andrew

我认为它在$scope.hasMark = !disable;声明中，正如您已经建议的那样。我想你应该改变如下：

在你成功的回调函数：

$scope.hasMark = !$scope.hasMark;

还要确保$posts.mark.disable存在于$范围。

我已经做了简化Plnkr来说明我的意思：Plnkr

来源

2015-08-24 18:24:09 ArBro

我以前试过，看起来很简单，但我不知道为什么它不起作用，因为我想！？ – Andrew

我更新了一下我的答案。你确定你在HTML中引用的所有属性都存在于范围中吗？ – ArBro

我更新了一下我的问题！我认为ng-init会阻止为hasMark定义新值。你怎么看？ – Andrew

AngularJs - 带有角度的书签按钮

回答

相关问题