How can I implement ng-class to toggle an icon when it is clicked, taking into account whether it is stored in local storage? For example, changing the favorite icon from outline to solid upon user click.
Below is my current implementation using ng-class and ng-click:
<i ng-class="{'icon ion-android-star': liked, 'icon ion-android-star-outline': !liked}" ng-click="favicon(office.id); togglefav(office.id); $event.stopPropagation();"></i>
I have a function to handle the icon change based on local storage, but it doesn't work as expected. The previous function toggled all icons instead of individual ones:
var e = JSON.parse($window.localStorage['fav']);
$scope.favicon = function(office){
if (e.indexOf(office) !== -1){
return !$scope.liked;
}
else if (e.indexOf(office) == -1){
return $scope.liked;
}
};
Additionally, I am curious if ng-init can be used to adjust icons that are already in local storage when the page loads?