Angular Default Value if Binding is Null

Question

I've seen a similar question and followed it to a tee. Angular Template Default Value if Binding Null / Undefined (With Filter)

My object looks like this:

{
  "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'm wrapping the left-hand side expression in brackets, but it doesn't display "TBA" for items that have a year of null.

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

I have a feeling, it's because I'm referencing a function and 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;
  };
})

@tasseKATT Updated the question with the `getDate` function. Using Angular 1.2.8. — realph, Dec 15 '14 at 18:40
Can't replicate it so far. Can you show the custom `dateToISO` filter too? — tasseKATT, Dec 15 '14 at 18:44
Are you sure, that `null` returned? May be it's string `'null'` ? — vp_arth, Dec 15 '14 at 18:45
Implement `default` filter also. and use it as `...|date:'yyyy'|default:'TBA'` — vp_arth, Dec 15 '14 at 18:46
It's in the db as `null`, not a string. But it's printing to the page as "undefined". — realph, Dec 15 '14 at 18:47
@vp_arth I get an error and the page doesn't load properly if I do `... || default:'TBA'`. — realph, Dec 15 '14 at 18:49

vp_arth · Answer 1 · 2014-12-15T19:03:15.650

6

Implement default filter also.

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

And use it as:

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

Update: also your dateToISO filter may fails, if undefined or null been received.
Check its input.

.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 have 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>

edited Dec 15 '14 at 19:03

answered Dec 15 '14 at 18:50

vp_arth

14,461
4
37
66

Still returning as "undefined". Weird. Is there not a way to separate the right-side expression and use a function on the left-hand side? – realph Dec 15 '14 at 18:55
where is your `date` filter? – vp_arth Dec 15 '14 at 19:04
It comes after my module. `angular.module('myApp', ['ngRoute','ngSanitize' ]).filter('dateToISO', function() {...`. – realph Dec 15 '14 at 19:06
no `dateToISO`, `date`. which gives you `yyyy`... Anyway, see simple way to solve your issue in bottom of answer. – vp_arth Dec 15 '14 at 19:08
Ahh, I guess that's an alternative way to do it. I guess that would work, but would also like to find out why I can't do a lh rh expression with a function. – realph Dec 15 '14 at 19:10
I think, issue in your `.filter('date',` – vp_arth Dec 15 '14 at 19:11

Tyler Roth · Answer 2 · 2014-12-15T18:55:31.857

3

Try this:

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

edited Dec 15 '14 at 18:55

answered Dec 15 '14 at 18:45

Tyler Roth

43
4

It's printing to the page as "undefined". – realph Dec 15 '14 at 18:45

Angular Default Value if Binding is Null

2 Answers2

Linked