使用ng类创建收藏夹图标

Using ng-class to create a favourites icon

本文关键字：收藏夹 图标 创建 ng 使用      更新时间：2023-09-26

我试图在点击图标时使用ng类来更改图标，但也需要根据图标是否在本地存储中进行更改。因此，当用户点击最喜欢的图标时，它会从轮廓变为实心。

这是我使用ng类来更改图标的地方，但我希望它在通过ng单击时更改。

<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>

这是我创建的将图标从轮廓更改为实心的功能，但它不起作用。我以前的函数刚刚返回$scope.liked=$scope.wike，该操作有效，但它更改了所有图标，而不是单个图标。

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

我的第二个问题是，当加载页面时，我可以将其与ng init一起使用来更改本地存储中具有值的图标吗？

您没有设置$scope.liked的值，只是返回它，这对您的ng-class没有影响。您可以将if语句更改为类似的语句。

这就是$scope.liked = !$scope.liked的旧ng-click工作的原因，因为它总是在点击时切换变量。

var e = JSON.parse($window.localStorage['fav']);
$scope.favicon = function(office){
    $scope.liked = e.indexOf(office) !== -1;
};
相关文章：