Show &nbsp if value empty

Question

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:

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:

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

Answer 1

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

Answer 2

angular.module('myApp',[])
    .filter('chkEmpty',function(){
        return function(input){
            if(angular.isString(input) && !(angular.equals(input,null) || angular.equals(input,'')))
                return input;
            else
                return ' ';
        };
    });

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/