Angular Default if Null Binding

Question

I saw a similar question and followed it into the tee. Angular The default value for the template if the binding is Null / Undefined (with filter)

My object is as follows:

{ "image": { "icon_url": "http://static.giantbomb.com/uploads/square_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg", "medium_url": "http://static.giantbomb.com/uploads/scale_medium/9/93770/2496414-dying-light-2013523175751_8.jpg", "screen_url": "http://static.giantbomb.com/uploads/screen_medium/9/93770/2496414-dying-light-2013523175751_8.jpg", "small_url": "http://static.giantbomb.com/uploads/scale_small/9/93770/2496414-dying-light-2013523175751_8.jpg", "super_url": "http://static.giantbomb.com/uploads/scale_large/9/93770/2496414-dying-light-2013523175751_8.jpg", "thumb_url": "http://static.giantbomb.com/uploads/scale_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg", "tiny_url": "http://static.giantbomb.com/uploads/square_mini/9/93770/2496414-dying-light-2013523175751_8.jpg" }, "name": "Dying Light", "original_game_rating": null, "original_release_date": null, "objectID": "346569380" } 

I wrap the left expression in parentheses, but does not display "TBA" for elements that have year null .

 <span>{{ (getDate(hit.original_release_date) | date:'yyyy') || 'TBA' }}</span> 

I have this feeling because I am referencing a function and am already using a set of parentheses. How can I solve this problem ...?

Any help with this is appreciated. Thanks in advance!

UPDATE:

Here's the getDate() function:

 $scope.getDate = function(date) { return $filter('dateToISO')(date); }; 

And the dateToISO filter:

 .filter('dateToISO', function() { return function(input) { var dateTime = input.split(" "); var date = dateTime[0]; var datePartials = date.split("-"); var time = dateTime[1]; var timePartials = time.split(":"); var formattedDate = new Date(); formattedDate.setFullYear(datePartials[0]); formattedDate.setMonth(datePartials[1]-1); formattedDate.setDate(datePartials[2]); formattedDate.setHours(timePartials[0]); formattedDate.setMinutes(timePartials[1]); return formattedDate; }; }) 

Answer 1

Implement the default filter.

 app.filter('default', [function(){ return function(value, def) { return value || def; }; }]); 

And use it like:

 <span>{{getDate(hit.original_release_date) | date:'yyyy' | default: 'TBA'}}</span> 

Update: your dateToISO filter may also be damaged if undefined or null received.
Check its entry.

 .filter('dateToISO', function() { return function(input) { if (!input || !input.match(/^\d{2}-\d{2}-\d{4} \d{2}\:\d{2}\:\d{2}$/)) return; var dateTime = input.split(" "); var date = dateTime[0]; var datePartials = date.split("-"); var time = dateTime[1]; var timePartials = time.split(":"); var formattedDate = new Date(); formattedDate.setFullYear(datePartials[0]); formattedDate.setMonth(datePartials[1]-1); formattedDate.setDate(datePartials[2]); formattedDate.setHours(timePartials[0]); formattedDate.setMinutes(timePartials[1]); return formattedDate; }; }) 

Add

And in angular you always need to do:

 <span ng-if="hit.original_release_date">{{getDate(hit.original_release_date) | date:'yyyy'}}</span> <span ng-if="!hit.original_release_date">TBA</span> 

Answer 2

Try the following:

 {{hit.original_release_date ? (hit.original_release date | date:'yyyy') : 'TBA'}}