在AngularJS中切换具有不同功能的图标

Question

点击以执行控制器中的功能

view.html：

  <a class="tab-item" ng-click="addBookmark('{{singleRecipe[0].recipe_id}}')">
    <i ng-class="{'icon ion-ios-pricetag': marked,'icon ion-ios-pricetag-outline' :!marked}" ng-click="marked=!marked"></i>Bookmark
  </a>

每次点击图标，动作都应该不同 controller.js：

$scope.newBookmark={};
$scope.newBookmark.userID =  $scope.userdata.user_id;
$scope.addBookmark = function(recipe_id)
{
  $scope.newBookmark.recipeID = recipe_id;
  console.log($scope.newBookmark);
  if (!BookmarkList.add){
    BookmarkList.delfave($scope.newBookmark);
    console.log(BookmarkList.delfave);
  }else{
    BookmarkList.add($scope.newBookmark);
    console.log(BookmarkList.add);
  }
};

Answer 1

您可能想要做的是有两个链接，一个用于添加到书签，另一个用于删除书签，并且可以使用ng-if或者ng-show＆＃39; d。

例如：

<a href="#" ng-click="addBookmark()" ng-if="!bookmarked">Add to bookmark</a>
<a href="#" ng-click="removeBookmark()" ng-if="bookmarked">Remove bookmark</a>