0

関数内の条件に基づいて ng-class を使用しようとしていますが、トグルが機能しないことがあります。$scope.getBookmarkIcon 関数を使用して、ページの更新後でもbookmarkIconクラスで選択されたng-classを取得できるようにしましたが、プロパティが機能していません。

            $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

4

1 に答える 1

0

最後に私は私の問題を解決しました。共有したいと思います。

完全なソースは次のとおりです。

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

ブックマークを追加する機能とブックマークを削除する機能の 2 つの機能の代わりに、1 つのトグル機能で簡略化しました。

$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;
            };  
        }]);
于 2015-12-28T19:38:34.263 に答える