How to use "ng-if" within the Html <a> tag?

Question

I'm a newbie to AngularJS. I am creating an example program. In that I have an HTML tag which has to be used based on a condition.

If i apply "ng-if" to the tag the content under the tag is hidden.

In my scenario the content has to be displayed but, if only the condition satisfies tag has to be applied.

<a href="someurl" ng-if="a != 3>
    <div> Text and image goes here </div>
</a>

If "a" is not equal to "3" then the content has to be displayed without href.

I would need some help to achieve this.

Thanks in advance...

Answer 1

JSBIN DEMO

You can use ng-attr-href to achieve that functionality:

  <a ng-attr-href="{{(a==3) ? 'someurl' : undefined}}">
     <div> Text and image goes here </div>
  </a>

In this condition:

{{(a==3) ? 'someurl' : undefined}}

undefined will completely remove the href attribte.