Useful AngularJS Filters

26 Jan 2015

I wanted to share some of the common AngularJS filters that I find myself using in numerous projects.

Useful AngularJS Filters

Path Combine filter
Boolean Mask filter
Camel Case to Human Readable String filter

Path Combine

(function () {
  'use strict';

  angular.module('myapp').filter('filePathCombine', ['$filter', filePathCombine]);

  /*
    Works like C# Path.Combine()
    Example usage: example.com
    Outputs: example.com\test.html
  */
  function filePathCombine() {

    return function (path1, path2) {

      if (!path1) return path2;

      if (path1.indexOf('\\') == path1.length-1) {
        return path1 + path2;
      } else {
        return path1 + '\\' + path2;
      }
    };
  }

})();

Bool Mask Filter

A common task is masking a boolean value with replacement text. Often times I want to show "yes" or "no" instead of "true" and "false."

(function() {
  'use strict';

  // Anything in maskTextForTrue will be displayed if bool is True

  angular.module('myapp').filter('boolMask', function() {
    return function(input, maskTextForTrue, maskTextForFalse) {
      if (input == null) {
        return "";
      }

      if (input) return maskTextForTrue;

      return maskTextForFalse;
    };
  });

})();

Convert Camel Case to Human Readable String

A simple regular expression wrapper to convert a camel case string into a string with spaces created by jdpedrie. For example, changes myCamelCaseString into My Camel Case String

'use strict';

angular.module('camelCaseToHuman', []).filter('camelCaseToHuman', function() {
  return function(input) {
    return input.charAt(0).toUpperCase() + input.substr(1).replace(/[A-Z]/g, ' $&');
  }
});

View code on github at jdpedrie/angularjs-camelCase-to-human-filter