Использование ng-класса на основе хранимых данных ng-cookies

Question

Использование ng-класса на основе хранимых данных ng-cookies

0

Я пытаюсь использовать ng-класс на основе условия внутри функции, но иногда переключатель не работает. Я использовал функцию $ scope.getBookmarkIcon, чтобы я мог выбрать ng-класс с классом bookmarkIcon даже после обновления страницы, но он не работает.

            $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;
            };  
        }]);

Вот что я пробовал до сих пор: http://plnkr.co/edit/raZeNb9FdCtfsf6FanU5?p=preview

Md. Salahuddin 28 дек. 2015, в 18:46

Источник

Теги:

javascript

angularjs

angularjs-scope

1 ответ

Ещё вопросы

Md. Salahuddin · Accepted Answer · 2015-12-28T16-46-00.000Z

Наконец я решил свою проблему, я хочу поделиться.

Вот полный источник:

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

Вместо двух функций, один для добавления закладки и другой для удаления закладки, я упростил ее с помощью одной функции переключения.

Я инициализирован с помощью $ scope.bookmarked = false;

Затем в 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>

Затем я сохранил getBookmarkIcon (item) вне модели, где возвращается только true или false на основе сохраненного значения в 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;
            };  
        }]);