使用基于ng cookie的ng类存储数据

Using ng-class based on ng-cookies stored data

本文关键字：ng 存储数据 cookie 更新时间：2023-09-26

我试图根据函数内部的条件使用ng类，但有时切换不起作用。我使用了$scope.getBookmarkIcon函数，这样即使在页面刷新后，我也可以用bookmarkIcon类选择ng类，但它不是工作属性。

            $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

最后我解决了我的问题，我想分享。

以下是完整的来源：

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）保留在模型之外，根据cookie中存储的值，只返回true或false。

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