Display "-" if value is empty?

Issue

Is there any way to say in angular something like this :

<th ng-repeat=" o in Odds" >{{o.Name || "-"}}</th>

So if there is no data in o.Name to display "-" ?

Solution

Your example should work, but if you have whitespace or a function in o.Name it will not resolve to falsey and you will get an invisible space in the HTML rather than the desired dash.

A generic filter could be used to substitute empty values for dashes and apply various normalisation on the input first:

angular.module('App.filters', []).filter('placeholder', [function () {
    return function (text, placeholder) {
        // If we're dealing with a function, get the value
        if (angular.isFunction(text)) text = text();
        // Trim any whitespace and show placeholder if no content
        return text.trim() || placeholder;
    };
}]);

You can then use it as follows:

<th ng-repeat=" o in Odds" >{{o.Name | placeholder:'-'}}</th>

This is then completely reusable for other rows/columns and anywhere else you want to apply the same rule.

Example: http://jsfiddle.net/kfknbsp7/4/

Answered By - seanhodges