UTSAV BHAGAT UTSAV BHAGAT - 5 months ago 10
HTML Question

show glyphicon based on value in angular

my controller :

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


my 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">


<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>


service factory :

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


I want to show glyphicon based on the value of stat

I have 6 blogs, first 3 are bookmarked and next 3 are not.

The problem i'm getting is that the stat value is always set according to the last bookmark and hence it is always false / true (based on the condition of last blog).

How to resolve this issue and set glyphicon respective to value of stat for each blog?

Answer

So there are multiple ways of implementing it.

You can either store the true/false values in either an array or you can run a function every time which returns true/false.

Using function which returns true/false values:

Modify your checkbookmark function to return true/false values as follows,

Controller code:

.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>

Using an array:

Store the true/false values in an array and access them in html using track by $index in your ng-repeat clause.

Controller code:

.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>

Hope this solves the problem.

I exactly don't know which implementation is better or any other implementations for the same. May be other folks in stackoverflow could suggest.