[英]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. 我想用angularjs创建一个书签按钮,我有marks表来存储它,也是一个包含所有帖子的Json文件。
HTML : 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? 你有什么想法
I think its in the $scope.hasMark = !disable;
我认为它在$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. 还要确保$posts.mark.disable
存在$posts.mark.disable
。
I have made a simplified Plnkr to show what I mean: Plnkr 我做了一个简化的Plnkr以显示我的意思: Plnkr
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. 很简单,但是它可以按我的意愿工作,我删除了无用的变量hasMark和ng-init,并且在ng-click上执行ajax函数后更改了值post.mark.disable 。 Any way it's work perfectly! 无论如何,它都能完美工作!
HTML 的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!
});
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.