16

I need to show a non-breaking space in a table cell if a value is empty. This is my template:

<td class="licnum">{{participant.LicenseNumber}}</td>

I've tried this, but it doesn't work:

<td class="licnum">{{participant.LicenseNumber} || "$nbsp;"}</td>

Here's the problem with it returning null values:

enter image description here

If License Number comes over with null value, the cell is empty and the row coloring looks like this.

Using lucuma's suggestion, it shows this:

enter image description here

After changing the if statement in the filter, still doesn't show non-null values:

enter image description here

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
MB34
  • 4,210
  • 12
  • 59
  • 110

2 Answers2

15

What you have should work. You are missing a closing } and have one in the middle of the expression that needs to be removed.

Here is a demo showing your solution working and an ng-if. http://plnkr.co/edit/UR7cLbi6GeqVYZOauAHZ?p=info

A filter is probably the route to go, but you could do it with a simple ng-if or ng-show (either on the td or even on a span):

<td class="licnum" ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</td>
<td class="licnum" ng-if="!participant.LicenseNumber">&nbsp;</td>

or

<td class="licnum"><span ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</span><span ng-if="!participant.LicenseNumber">&nbsp;</span></td>

I'm offering this up as an alternate solution that doesn't require adding code to a controller/filter.

You can read up a little about this method: if else statement in AngularJS templates

Community
  • 1
  • 1
lucuma
  • 18,247
  • 4
  • 66
  • 91
  • Updated the plnk. It shows both your original (fixed) solution and an ng-if. http://plnkr.co/edit/UR7cLbi6GeqVYZOauAHZ?p=info – lucuma Jun 13 '14 at 16:38
  • After having issues with the filter, this looks like the simpler way to do this and it shows the data correctly in the table. I'm changing accepted answers. – MB34 Jun 13 '14 at 17:31
6
angular.module('myApp',[])
    .filter('chkEmpty',function(){
        return function(input){
            if(angular.isString(input) && !(angular.equals(input,null) || angular.equals(input,'')))
                return input;
            else
                return '&nbsp;';
        };
    });

Just as @Donal said in order for this to work you'll need to use ngSanitize's directive ng-bind-html like this:

<td class="licnum" ng-bind-html="participant.LicenseNumber | chkEmpty"></td>

EDIT:

Here's a simple example: http://jsfiddle.net/mikeeconroy/TpPpB/

m.e.conroy
  • 3,508
  • 25
  • 27
  • Really weird because using this it actually shows ` ` in the cell, not a non-breaking space. If I change to return `""` it shows as empty thus causing problems with my row coloring. – MB34 Jun 13 '14 at 15:55
  • `ng-bind-html` should interpret the string as html and convert the ` ` appropriately. You need to include `ngSanitize` in your module for the directive to work. – m.e.conroy Jun 13 '14 at 16:00
  • If I add ngSantize to my declarations, it gives me an error Uncaught Object. – MB34 Jun 13 '14 at 16:22
  • Glad I could help, this really is the proper way of doing this - using a filter, although the `ng-if` version that @lucuma posted does work its not as readable in the long run in my opinion, plus you could reuse the filter over and over for other table cells rather than having a bunch of possible "td" tags in your template. – m.e.conroy Jun 13 '14 at 16:42
  • While this code does correctly add the ` `, it isn't showing the actual non-empty/non-null values in the cell. – MB34 Jun 13 '14 at 16:42
  • You may need to rectify the `if` statement to suit your needs, I just assumed that it would be a string and not empty – m.e.conroy Jun 13 '14 at 16:44
  • It can be string, integer or null – MB34 Jun 13 '14 at 17:15
  • Even changing the if and stepping through to make sure that it hits the `return input` line, it still doesn't show any non-null values. See last image in original post. – MB34 Jun 13 '14 at 17:23