Question

我正在尝试使用ng-class在单击时更改图标，但它也需要根据它是否在本地存储中进行更改。因此，当用户点击收藏夹图标时，它会从轮廓更改为实体。

这是我使用ng-class更改图标的地方，但是我希望它在通过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>

这是我创建的用于将图标从大纲更改为实体的功能，但它不起作用。我之前的函数刚刚返回$ scope.liked =！$ scope.liked，那个有效，但它改变了所有图标而不是单个图标。

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中使用它来更改页面加载时在本地存储中具有值的图标吗？

Answer 1

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

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

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

使用ng-class创建收藏夹图标

1 个答案: