This is just a bit of code demonstrating the ability to use Angular’s inline filtering capability to format numbers depending on another piece of data. I had a scenario where the numbers passed to the view could represent numeric units or monetary units. In order to keep the code lean and reusable I chose the following method.

The three lines below reside in the directive template file.


Available: {{ (t.UnitType == "Dollars") ? (t.UnitsAvailable | currency:'$') : (t.UnitsAvailable | number:0) }}
Used: {{ (t.UnitType == "Dollars") ? (t.UnitsUsed | currency:"$") : (t.UnitsUsed | number:0) }}
Max: {{ (t.UnitType == "Dollars") ? (t.UnitValue | currency:"$") : (t.UnitValue | number:0) }}

This is the directive that handles it all.


(function () {
  'use strict';

    .directive('liabilityItem', liabilityItem);

  function liabilityItem() {
    var directive = {
      scope: {
        t: '=itemData',
      templateUrl: './liability-list.template.html',
      link: link,
      restrict: 'E'
    return directive;

Lastly, this is the snippet of code from within the index file of the view. The ‘tier’ is an array of objects provided via controller.


  ng-repeat="t in tier"