根据角度值显示glyphicon

Question

我的控制员：

.controller('BlogController', function(blogFactory, $routeParams, $scope){

    var that=this;

    stat=false;

    this.checkbookmark = function(bId){
    console.log(bId)
    blogFactory.checkBookmark(bId, function(response){
        console.log(response)
        if(response == "bookmarked"){
            that.stat = true;  
        }
        else{
            that.stat = false;  
        }
    })
}

我的HTML代码：

<div class="container" ng-controller="BlogController as blogCtrl">

    <div class="row" ng-repeat="chunk in blogCtrl.blogs | filter: filter_name  | orderBy:'-created_at'  | groupBy: 3">


        <div class="outerbox1 col-sm-4" ng-repeat="blog in chunk" >
            <div class="innerbox3"  ng-init="blogCtrl.checkbookmark(blog._id)">
                <br>
                <div> > READ MORE 
                    <a ng-if="blogCtrl.stat" ng-href="#" ng-click="blogCtrl.removebookmark(blog._id)" class="glyphicon glyphicon-heart pull-right">{{blogCtrl.stat}}</a>
                    <a ng-if="!blogCtrl.stat" ng-href="#" ng-click="blogCtrl.addbookmark(blog._id)" class="glyphicon glyphicon-heart-empty pull-right">{{blogCtrl.stat}}</a> 
                </div>

            </div>
        </div>
    </div>
</div>

服务工厂：

  factory.checkBookmark = function(info, callback){
    $http({
        url:'api/check_bookmark_blog',
        method:'POST',
        headers:{'x-access-token': token},
        params:{'user_id': userid},
        data:{'blog_id':info}
    }).success(function(data){
        console.log(data);
        callback(data)
    })
}

我想根据 stat

的值显示glyphicon

我有6个博客，前3个是书签，接下来3个不是。

我得到的问题是 stat 值总是根据最后一个书签设置，因此它总是false / true（基于上一篇博客的条件）。

如何解决此问题并将glyphicon分别设置为每个博客的stat值？

Answer 1

因此有多种方法可以实现它。

您可以将true/false值存储在array中，也可以每次返回function时运行true/false。

使用返回true/false值的函数：

修改您的checkbookmark函数以返回true/false值，如下所示，

控制器代码：

.controller('BlogController', function (blogFactory, $routeParams, $scope) {

    this.checkbookmark = function (bId) {
        blogFactory.checkBookmark(bId, function (response) {
            if(response == "bookmarked"){
                return true; // returns true if bookmarked 
            } else {
                return false;  // returns false if not bookmarked
            }
        });
    };

});

HTML code：

<div class="container" ng-controller="BlogController as blogCtrl">

    <div class="row" ng-repeat="chunk in blogCtrl.blogs | filter: filter_name  | orderBy:'-created_at'  | groupBy: 3 track by $index">
        <div class="outerbox1 col-sm-4" ng-repeat="blog in chunk track by $index" >
                <!-- removed ng-init here -->
                <div class="innerbox3">
                <br>
                <div> > READ MORE 
                    <a ng-if="blogCtrl.checkbookmark(blog._id)" ng-href="#" ng-click="blogCtrl.removebookmark(blog._id)" class="glyphicon glyphicon-heart pull-right">{{blogCtrl.stat}}</a>
                    <a ng-if="!blogCtrl.checkbookmark(blog._id)" ng-href="#" ng-click="blogCtrl.addbookmark(blog._id)" class="glyphicon glyphicon-heart-empty pull-right">{{blogCtrl.stat}}</a> 
                </div>
            </div>
        </div>
    </div>

</div>

使用数组：

将true/false值存储在数组中，然后使用html访问它们 track by $index条款中的ng-repeat。

控制器代码：

.controller('BlogController', function (blogFactory, $routeParams, $scope) {

    this.stat = [];  // initializing array
    this.checkbookmark = function (bId) {
        blogFactory.checkBookmark(bId, function (response) {
            if(response == "bookmarked"){
                this.stat.push(true);  
            } else {
                this.stat.push(false);  
            }
        });
    };

});

HTML code：

<div class="container" ng-controller="BlogController as blogCtrl">

    <div class="row" ng-repeat="chunk in blogCtrl.blogs | filter: filter_name  | orderBy:'-created_at'  | groupBy: 3 track by $index">
            <!-- note the usage of track by $index in ng-repeat -->
            <div class="outerbox1 col-sm-4" ng-repeat="blog in chunk track by $index" >
            <div class="innerbox3"  ng-init="blogCtrl.checkbookmark(blog._id)">
                <br>
                <div> > READ MORE 
                    <a ng-if="blogCtrl.stat[$index]" ng-href="#" ng-click="blogCtrl.removebookmark(blog._id)" class="glyphicon glyphicon-heart pull-right">{{blogCtrl.stat}}</a>
                    <a ng-if="!blogCtrl.stat[$index]" ng-href="#" ng-click="blogCtrl.addbookmark(blog._id)" class="glyphicon glyphicon-heart-empty pull-right">{{blogCtrl.stat}}</a> 
                </div>
            </div>
        </div>
    </div>

</div>

希望这能解决问题。

我完全不知道哪个实现更好或者相同的任何其他实现。可能是stackoverflow中的其他人可能会建议。