title: Convert this function from jQuery to AngularJS
body: <p>I have this function in jQuery </p>
  
  <pre><code>$('.cancelPending').live('click', function(){
  
      if($(this).hasClass('opacity')){ return false; }
      $(this).addClass('opacity').html('&lt;i class="icon icon-remove"&gt;&lt;/i&gt;Cancelling...');
      var id = $(this).parents('.holiday').getId();
      //Etc...
  </code></pre>
  
  <p>How would I recreate that in Angular? So far I have just the empty function set up</p>
  
  <pre><code>&lt;a class="cancelPending" ng-click="cancePending(p.id)" href="#"&gt;&lt;i class="icon icon-remove"&gt;&lt;/i&gt;Cancel Request&lt;/a&gt;
  
  ...
  
  $scope.cancelPending = function(id) {
  
  }
  </code></pre>
  
  <p>What's the Angular way to manipulate the classes/html of an element? I think for the class it will be <code>ng-class="{opacity: someVariable?}"</code> but I can't think what the HTML would be.</p>