根据角度值显示字形图标

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 代码：

<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 代码：

<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中的其他人可能会建议。