Render Object with optional ahref

Question

I have an object speaker, in my scope and I would like to render it with angularjs.

I would like to render in my html page, if speaker.url exists:

<a href="{{speaker.url}}">{{speaker.name}}</a>

Otherwise, just render (without a element):

{{speaker.name}}

What's the best way to achieve this?

Answer 1

Try using ng-if

<a ng-if="speaker.url" href="{{speaker.url}}">{{speaker.name}}</a>
<span ng-if="!speaker.url">{{speaker.name}}</span>

You can also do it using ng-show with the same logic. But ng-show just shows/hides the element. ng-if removes it from the DOM if not required.

what is the difference between ng-if and ng-show/ng-hide