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>

Build your own filter and pass the conf object to it. Inject the $filter service and call the appropriate filter when you need to (see this answer for how to do that). — Heretic Monkey
– Heretic Monkey, Commented Sep 1, 2016 at 21:26

bhantol · Accepted Answer · 2016-09-01 22:13:21Z

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;

  }

});

Community · Accepted Answer · 2017-05-23 10:27:51Z

0

I think the best way to do this with Angular would be to define your own custom filter. Inside that filter you can run JavaScript code to conditionally apply other filters to your value.

There's plenty of documentation on using and creating filters in AngularJS and how powerful they can be.

Then to call a filter inside your own filter, this answer is pretty good

Note that all this is for AngularJS v1, not AngularJS v2

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Sep 1, 2016 at 21:29

Luke K

8956 silver badges14 bronze badges

Collectives™ on Stack Overflow

Choose angularjs filter dynamically based on condition in ng-repeat

javascript

html

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

javascript

html

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related