javascript - Choose angularjs filter dynamically based on condition in ng-repeat -

i looping through list of items using ng-repeat. there values want display simple numbers "435" or "43", want display double 2 decimal places "545,32.43" or "343.32", values percentage want display "75%", , currency want display "$65,434".

i know angularjs provides filters kinds of operations (number, currency, percentage) etc.

but how can chose 1 of 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> 

there many ways 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 can write 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;    }  });