CODEWITHSUNDEEP
javascriptangularjs
Christopher Pantelli
Christopher Pantelli

Reputation: 55

Replace/Toggle ng-click event once clicked

I am building a web app that allows users to mark which episode of a show they have watched. On load it has a ng-click event called markEpisode(). Once that is clicked, I want the ng-click event to change to unmarkEpisode().

Currently I have it removing the ng-click attribute and then re-adding a new one. But doesn't seem to work.

// Unmark Episode As Watched
$scope.unmarkEpisode = function(episode_number, season_number, id) {
  $http.post('/api/show/' + id + '/season/' + season_number + '/episode/' + episode_number + '/unwatch')
    .then(response => {
      $('.episode-artwork[data-episode-season="' + episode_number + season_number + '"]').removeAttr('ng-click').attr('ng-click', 'markEpisode(' + episode_number + "," + season_number + "," + id + ')');
    });
};

This is how I add the episodes in

$('#episodes .row').append($compile('<div class="col-sm-3">' +
  '<div data-episode-season="' + response.data.episodes[i].episode_number + response.data.episodes[i].season_number + '" class="episode-artwork" ng-click="markEpisode(' + response.data.episodes[i].episode_number + "," + season_number + "," + id + ')" style="background-image: url(' + imageURL + ')">' +
  '</div>' +
  '<p class="episode-name">' + response.data.episodes[i].episode_number + '. ' + response.data.episodes[i].name + '</p>' +
  '<p class="episode-text">' + response.data.episodes[i].overview + '</p></div>')($scope));

Upvotes: 0

Views: 38

Answers (1)

Marc
Marc

Reputation: 1886

It would be good to have two links or buttons: one for mark, one for unmark.

Each button should have an *ngIf="item.isMarked" or *ngIf="!item.isMarked".

I think that it's not a good idea to mix angular and jquery. If you are working with angular, there is no need to manipulate the dom via jQuery.

Upvotes: 1

Related Questions