Displaying link conditionally in Angular.js

Question

Basically, I have this code in my template:

<tr ng-repeat="entry in tableEntries">

  <td ng-switch="entry.url == ''">
    <span ng-switch-when="false"><a href="{{entry.url}}">{{entry.school}}</a></span>
    <span ng-switch-when="true">{{entry.school}}</span>
  </td>

  ...
</tr>

As you can see I'm trying to display a clickable URL when entry.url is not empty and a plain text otherwise. It works fine, but it looks quite ugly. Is there a more elegant solution?

Another way I can think of doing it is using ng-if:

<td>
  <span ng-if="entry.url != ''"><a href="{{entry.url}}">{{entry.school}}</a></span>
  <span ng-if="entry.url == ''">{{entry.school}}</span>
</td>

But then I would be repeating almost the same comparison twice, which looks even worse. How would you guys approach this?

Answer 1

You can try.

<div ng-show="!link">hello</div> <div ng-show="!!link"><a href="{{link}}">hello</a></div>

But the ngSwitch which you are using should be fine.