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

Question

I am new to AngularJS. I am creating an example program. In this case, I have an HTML tag that should be used based on the condition.

If I applied the "ng-if" tag, the content under the tag is hidden.

In my script, the content should be displayed, but if only a condition satisfying the tag is required.

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

If " a " is not equal to " 3 ", the content should be displayed without href.

I need help to achieve this.

Thanks in advance...

Answer 1

JSBIN DEMO

You can use ng-attr-href to achieve this 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 attribute.