Choose angularjs filter dynamically based on condition in ng-repeat

Question

I am looping through list of items using ng-repeat. There are some values which i want to display as simple numbers like "435" or "43", some i want to display as double like with 2 decimal places "545,32.43" or "343.32", some values are percentage which i want to display like "75%", and some are currency which i want to display as "$65,434".

I know angularjs provides filters for all kinds of operations (number, currency, percentage) etc.

But how can i chose one of the filter dynamically based on condition?

javascript

config:[
    {key:"Issue County",value:50,valColor:'#4caeed', type:'integer',dec_places:0},
    {key:"Issue Average", value:10.5356 ,valColor:'#4caeed', type:'double', dec_places:2},
    {key:"Issues Percentage", value:57, valColor:'#e54343', type:'percentage', dec_places:2},
    {key:"Total Amount", value:65000, valColor:'#4ca977', type:'currency', dec_places:0}
]

html

<ui class="subCardDiv" ng-repeat="conf in item.config">
    <li  style="display: inline;">
        <span class="cardDivKey" style="padding-top: 2px;">{{conf.key}} </span>
        <span class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:conf.dec_places}} </span>
        <span ng-if="conf.text" class="cardDivText" style="padding-top: 2px;">{{conf.text}} </span>
    </li>
</ui>

Answer 1

There are many ways to do this

Demo

ng-switch-approach

  <ui class="subCardDiv">
    <li style="display: inline;" ng-repeat="conf in item.config">
      <span class="cardDivKey" style="padding-top: 2px;">{{conf.key}} </span>
      <span ng-switch="conf.type">
          <span ng-switch-when="double" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:2}}</span>
      <span ng-switch-when="percentage" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value+'%'}}</span>
      <span ng-switch-when="currency" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | currency}}</span>
      <span ng-switch-when="integer" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:0}}</span>
      <span ng-switch-default class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value}}</span>
      </span>
      <span ng-if="conf.text" class="cardDivText" style="padding-top: 2px;">{{conf.text}} </span>
    </li>
  </ui>

controller function option

  $scope.displayConf = function(conf) {
    if (conf.type == 'double') {
      return $filter('number')(conf.value, 2);
    } else
    if (conf.type == 'integer') {
      return $filter('number')(conf.value);
    } else
    if (conf.type == 'percent') {
      return conf.value + '%';
    } else
    if (conf.type == 'currency') {
      return $filter('currency')(conf.value);
    } else
      return conf.value;
  };

And you can also write a generic filter

generic-filter approach

filter('myFilter', function($filter) {
  return function(conf) {
    if (conf.type == 'double') {
      return $filter('number')(conf.value, 2);
    } else
    if (conf.type == 'integer') {
      return $filter('number')(conf.value);
    } else
    if (conf.type == 'percentage') {
      return conf.value + '%';
    } else
    if (conf.type == 'currency') {
      return $filter('currency')(conf.value);
    } else
      return conf.value;

  }

});