10

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?

Improve this question
2
  • 1
    this may help you: stackoverflow.com/questions/15810278/… Commented Jan 2, 2015 at 10:59
  • Use <td ng-switch="!!entry.url"> then you can simply use true/false Commented Jan 2, 2015 at 11:03

4 Answers 4

Reset to default
6

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Use double negation, it cast into boolean thus !!entry.url will return true if string is not empty.

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

A good read What is the !! (not not) operator in JavaScript? and Double negation (!!) in javascript - what is the purpose?

Improve this answer

Comments

2

You can create a custom directive that hides the complexity:

HTML

<tr ng-repeat="entry in tableEntries">
  <td>
    <link model="entry"></link>
  </td>
  ...
</tr>

JS

app.directive('link', function() {
    return  {
        restrict: 'E', 
        scope: {
           model: '='
        },
        template: '<a ng-if="model.url != ''" href="{{model.url}}">{{model.school}}</a><span ng-if="model.url == ''"> {{ model.school }}</span>'

    }
});
Improve this answer

Comments

-2

I would recommend having an ng-class="{'className': whenEntryURLisWhatever}" in your td, and make it change the css styles accessed, e.g:

td span{ /*#normal styles#*/ }
.className span{ /*#styles in the case of added classname (when it is a link)#*/
           text-decoration: underline; 
           cursor:   pointer; 
}

Then just change what happens on ng-click within a function defined in your javascript code.

$scope.yourFunction = function(url){
    if(!!url){
        window.location = YourURL;
    }
}

This would cut down on code repetition, as your html could now be:

 <tr ng-repeat="entry in tableEntries">
  <td ng-class="{'className': !!entry.url}">
    <span ng-click="yourFunction(entry.url)">{{entry.school}}</span> 
  </td>
  ...
</tr>
Improve this answer

3 Comments

What ng-click? I have no idea what you are talking about. Do you suggest hiding unused elements in CSS? How is it any better than what I'm doing now?
not at all, in your css you can have .className span{ text-decoration: underline; cursor: pointer; } and any other styles you want on a link. Then inside your span, have ng-click="yourFunction()"
I have edited the answer to try and explain this better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.