CODEWITHSUNDEEP
javascriptangularjs
Petya Naumova
Petya Naumova

Reputation: 717

Angular 1.5 Custom Filter for formatting different object properties

I am thinking how to make a custom Angular 1.5 filter which will be used for formatting the values of different object's properties. In the html file is rendered with ng-repeat this code:

<div>{{::object.day || object.date || 'Something else'}}</div>

The backend sends these object properties as they can have null value, so this line of code says - if the object has property day which has not null value, render it, or if the other property date has not null value, render it. If the two properties have null value, render 'Something else'.

This logic will be used on many places in the application so it's better to create a custom Angular filter which will hold it.

So, I made this:

angular.module('my-app', []).
filter('my-filter', my-filter);

function myFilter($filter){

 return function(inputDay, inputDate) {

   if(inputDay) {
     var day = $filter('date')(new Date(inputDay), 'EEE');
     return day;
   }

   else if(inputDate) {
    var date = $filter('date')(new Date(inputDate), 'M/d/yyyy');
    return date;
   }

   else {
    return 'Something else';
   }

  }

}

And in the html: 

<div>{{::object.day | myFilter:{object:day} || object.date | myFilter:{object:date}}}</div>

As the last part Something else is not added in the expression in the html since in the filter's code it should be returned if both inputDay and inputDate are null.

The problem is that maybe my condition in the html is wrong, because the filter applies but only for the first part of the condition - if the object's property day is not null. So in the ng-repeated items with this property when it's not null, it works.

But for the other case - when the date is not null, the result of the filtering is {}. The same for the third case when day and date have null values, instead of Something else, it displays {}.

After some debugging I saw that the property of the object is undefined.

Object {myobject: undefined}


Where is my mistake? Any suggestions are appreciated.

Upvotes: 1

Views: 117

Answers (1)

Georgi Naumov
Georgi Naumov

Reputation: 4211

You can try this solution.

This is the template:

<div id="body">
  <div ng-controller="FrameController as vm">
    <div>{{vm.firstObject.day && (vm.firstObject.day|myFilter:'day') || vm.firstObject.date && (vm.firstObject.date|myFilter:'date')}}</div>
    <div>{{vm.secondObject.day && (vm.secondObject.day|myFilter:'day') || vm.secondObject.date && (vm.secondObject.date|myFilter:'date')}}</div>
  </div>
</div>

and this is the JavaScript part:

angular.module('app', []).filter('myFilter', function ($filter){

return function(inputDate, formatType) {
if(formatType === 'day') {
     var day = $filter('date')(new Date(inputDate), 'EEE');
     return day;
   }
   else if(formatType === 'date') {
    var date = $filter('date')(new Date(inputDate), 'M/d/yyyy');
    return date;
   }

   return 'Something else';
}
})
.controller('FrameController', ['$injector', function($injector) {
  var vm = this;
  vm.message = 'Hello world';
  vm.firstObject = {
     day: new Date()
  };
  vm.secondObject = {
     date: new Date()
  };
}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

and here is the working jsfiddle:

http://jsfiddle.net/2mbs3o4s/

Upvotes: 1

Related Questions