Using ng-class based on ng-cookies stored data

Question

I am trying to use ng-class based on condition inside a function but sometimes the toggle does not work. i used $scope.getBookmarkIcon function so that i can get ng-class selected with bookmarkIcon class even after the page refresh but it is not working property.

            $scope.bookmarks = $cookieStore.get('data_bookmark') ? $cookieStore.get('data_bookmark') : { items:[] };   
            console.log($scope.bookmarks);
            $scope.saveBookmark = function(resortId) {           
                $scope.bookmarks.items.push({ id:resortId });     
                $cookieStore.put('data_bookmark',$scope.bookmarks);
                var cookie = $cookieStore.get('data_bookmark');       
                console.log($scope.bookmarked);
                console.log(cookie);
            };

            $scope.removeBookmark = function(resortId) {      
                var data = $scope.bookmarks.items;
                for(var key in data) {          
                    if(data[key].id===resortId) {
                        var index = Object.keys(data).indexOf(key);                   
                        $scope.bookmarks.items.splice(index, 1); break;        
                    }       
                }     
                $cookieStore.put('data_bookmark',$scope.bookmarks);
                var ncookie = $cookieStore.get('data_bookmark');         
                console.log($scope.bookmarked);
                console.log(ncookie);
            };   

            $scope.getBookmarkIcon = function(resortId)   
             {                                  
                $scope.bookmarked = false;
                var dataList = $scope.bookmarks.items;         
                dataList.filter(function(item) {         
                    if(item.id===resortId) {
                        $scope.bookmarked = true;          
                    }        
                });
                return $scope.bookmarked;
            };  
        }]);

Here what i tried so far: http://plnkr.co/edit/raZeNb9FdCtfsf6FanU5?p=preview

Md. Salahuddin · Accepted Answer · 2015-12-29T04:30:43.673

Finally i solved my problem, i want to share.

Here is full source:

http://plnkr.co/edit/9NZHjAuEvC6wVN7YE8Yh?p=preview

Instead of two function, one for adding bookmark and another one for removing bookmark, i simplified it with one toggle function.

I initialized with $scope.bookmarked = false;

Then in html:

<td class="ellipsis" ng-model="bookmarked" ng-class="{'bookmarkIcon':getBookmarkIcon(item)}">
<a ng-click="bookmarked=!bookmarked; toggleBookmark(item);" 
 href="javascript:void(0);" title="{{(getBookmarkIcon(item))?'Remove 
 bookmark':'Bookmark this area'}}">{{item}}
</a>
</td>

Then i kept getBookmarkIcon(item) outside of model, where only true or false is returned based on stored value in cookie.

        var app = angular.module('myCookieBasedBookmark', ['ngCookies']);
        app.controller('homeController', ['$cookieStore', '$cookies', '$scope', function($cookieStore, $cookies, $scope) {
            $scope.bookmarked = false;
            $scope.bookmarks = $cookieStore.get('data_bookmark') ? $cookieStore.get('data_bookmark') : { items:[] };   
            console.log($scope.bookmarks);
            $scope.toggleBookmark = function(resortId) {                     
                var data = $scope.bookmarks.items;
                var found = false;
                for(var key in data) {          
                    if(data[key].id===resortId) {
                        var index = Object.keys(data).indexOf(key);                   
                        $scope.bookmarks.items.splice(index, 1); found = true; break;        
                    }       
                }

                if(!found){                    
                  $scope.bookmarks.items.push({ id:resortId });    
                }
                $cookieStore.put('data_bookmark',$scope.bookmarks);                    
                var cookie = $cookieStore.get('data_bookmark');
                console.log(cookie);
            };

            $scope.getBookmarkIcon = function(resortId) {
                var found = false;
                var dataList = $scope.bookmarks.items;         
                dataList.filter(function(item) {         
                    if(item.id===resortId) {
                        found = true;          
                    }        
                });
                return found;
            };  
        }]);

Using ng-class based on ng-cookies stored data

1 Answers1