Switching icon in AngularJS with different functions

Question

What to put in ng-click to follow the functions in my controller

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>

Every click of the icon the action should be different 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);
  }
};

Your html doesn't really match up with your controller code. What exactly do you want to happen, and what is it doing currently? — Rhumborl
– Rhumborl, Commented Mar 3, 2016 at 21:13
what i want is that if the first click adds bookmark the second click should remove bookmark but as of now the first and the second click adds bookmark — Sandy
– Sandy, Commented Mar 3, 2016 at 21:35

Carlo Cruz · Accepted Answer · 2016-03-04 03:05:58Z

1

What you might want to do is have two links, one to add to bookmark and one to remove the bookmark and have them ng-if'd or ng-show'd.

Eg:

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

answered Mar 4, 2016 at 3:05

Carlo Cruz

701 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S Panfilov Over a year ago

Usually is better to use ng-show instead of ng-if because ng-if create own scope (and result may wonder you)

Sandy Over a year ago

but i want it to be in the same <a> in which icon switches

Carlo Cruz Over a year ago

@Sandy, why do you want it in the same a tag? Won't the end result be the same?

Collectives™ on Stack Overflow

Switching icon in AngularJS with different functions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related