根据值 html angular 显示字形图标

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>

我想根据 stat 的值显示 glyphicon

我有 6 个博客，前 3 个有书签，后 3 个没有。

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

如何解决？

Answer 1

您应该在博客对象上设置属性（显然属于该对象），而不是在控制器上设置 stat 属性

用这个替换你的复选书签功能：

this.checkbookmark = function(blog){ //pass the entire blog, not just the id
    blogFactory.checkBookmark(blog._id, function(response){
        console.log(response)
        if(response == "bookmarked"){
            blog.stat = true;  //set the property on blog instead of the controller
        }
        else{
            blog.stat = false;  
        }
    })
}

然后像这样使用它：

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

您需要对 add 和 removebookmark 函数进行类似的更改