Math functions in AngularJS bindings

Question

Is there a way to use math functions in AngularJS bindings   e g     lt p gt The percentage is   Math round 100 count total     lt  p gt    This fiddle shows the problem  http   jsfiddle net ricick jtA99 1

User · Answer

This is more or less a summary of three answers (by Sara Inés Calderón, klaxon and Gothburz), but as they all added something important, I consider it worth joining the solutions and adding some more explanation.

Considering your example, you can do calculations in your template using:

{{ 100 * (count/total) }}

However, this may result in a whole lot of decimal places, so using filters is a good way to go:

{{ 100 * (count/total) | number }}

By default, the number filter will leave up to three fractional digits, this is where the fractionSize argument comes in quite handy ({{ 100 * (count/total) | number:fractionSize }}), which in your case would be:

{{ 100 * (count/total) | number:0 }}

This will also round the result already:

_x000D_

angular.module('numberFilterExample', [])_x000D_
  .controller('ExampleController', ['$scope',_x000D_
    function($scope) {_x000D_
      $scope.val = 1234.56789;_x000D_
    }_x000D_
  ]);

_x000D_

<!doctype html>_x000D_
<html lang="en">_x000D_
  <head>  _x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
  </head>_x000D_
  <body ng-app="numberFilterExample">_x000D_
    <table ng-controller="ExampleController">_x000D_
      <tr>_x000D_
        <td>No formatting:</td>_x000D_
        <td>_x000D_
          <span>{{ val }}</span>_x000D_
        </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>3 Decimal places:</td>_x000D_
        <td>_x000D_
          <span>{{ val | number }}</span> (default)_x000D_
        </td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>2 Decimal places:</td>_x000D_
        <td><span>{{ val | number:2 }}</span></td>_x000D_
      </tr>_x000D_
      <tr>_x000D_
        <td>No fractions: </td>_x000D_
        <td><span>{{ val | number:0 }}</span> (rounded)</td>_x000D_
      </tr>_x000D_
    </table>_x000D_
  </body>_x000D_
</html>

_x000D_

Last thing to mention, if you rely on an external data source, it probably is good practise to provide a proper fallback value (otherwise you may see NaN or nothing on your site):

{{ (100 * (count/total) | number:0) || 0 }}

Sidenote: Depending on your specifications, you may even be able to be more precise with your fallbacks/define fallbacks on lower levels already (e.g. {{(100 * (count || 10)/ (total || 100) | number:2)}}). Though, this may not not always make sense..

User · Answer

You have to inject Math into your scope  if you need to use it as  scope know nothing about Math   Simplest way  you can do   scope Math   window Math    in your controller  Angular way to do this correctly would be create a Math service  I guess

User · Answer

That doesn t look like a very Angular way of doing it  I m not entirely sure why it doesn t work  but you d probably need to access the scope in order to use a function like that   My suggestion would be to create a filter  That s the Angular way   myModule filter  ceil   function         return function input            return Math ceil input                Then in your HTML do this    lt p gt The percentage is     100 count total    ceil     lt  p gt

User · Answer

While the accepted answer is right that you can inject Math to use it in angular  for this particular problem  the more conventional angular way is the number filter    lt p gt The percentage is    100 count total   number 0    lt  p gt    You can read more about the number filter here  http   docs angularjs org api ng filter number

User · Answer

I think the best way to do it is by creating a filter  like this    myModule filter  ceil   function         return function input            return Math ceil input                then the markup looks like this    lt p gt The percentage is     100 count total    ceil     lt  p gt    Updated fiddle  http   jsfiddle net BB4T4

User · Answer

Angular Typescript example using a pipe   math pipe ts  import   Pipe  PipeTransform   from   angular core     Pipe     name   math       export class MathPipe implements PipeTransform      transform value  number  args  any   null  any         if value            return Math args  value                 return 0          Add to  NgModule declarations    NgModule     declarations        MathPipe    then use in your template like so      100 count total    math  round

User · Answer

Why not wrap the whole math obj in a filter   var app   angular module  fMathFilters         function math         return function input arg            if input                return Math arg  input                      return 0           return app filter  math   math      and to use      number var   math  ceil

User · Answer

The easiest way to do simple math with Angular is directly in the HTML markup for individual bindings as needed  assuming you don t need to do mass calculations on your page  Here s an example      data input data input2   number      In this case you just do the math in the    and then use a filter   to get a number answer  Here s more info on formatting Angular numbers as text    https   docs angularjs org api ng filter

User · Answer

Either bind the global Math object onto the scope  remember to use  window not window    scope abs    window Math abs    Use the binding in your HTML    lt p gt Distance from zero    abs distance    lt  p gt      Or create a filter for the specific Math function you re after   module filter  abs      window   function  window      return function n        return  window Math abs  window parseInt n               Use the filter in your HTML    lt p gt Distance from zero    distance   abs   lt  p gt

User · Answer

Better option is to use       100 score questionCounter     0   number 0     It sets default value of equation to 0 in the case when values are not initialized

User · Answer

The number filter formats the number with thousands separators  so it s not strictly a math function   Moreover  its decimal  limiter  doesn t ceil any chopped decimals  as some other answers would lead you to believe   but rather rounding them   So for any math function you want  you can inject it  easier to mock than injecting the whole Math object  like so   myModule filter  ceil   function        return Math ceil        No need to wrap it in another function either

User · Answer

This is a hairy one to answer  because you didn t give the full context of what you re doing  The accepted answer will work  but in some cases will cause poor performance  That  and it s going to be harder to test   If you re doing this as part of a static form  fine  The accepted answer will work  even if it isn t easy to test  and it s hinky   If you want to be  Angular  about this   You ll want to keep any  business logic   i e  logic that alters data to be displayed  out of your views  This is so you can unit test your logic  and so you don t end up tightly coupling your controller and your view  Theoretically  you should be able to point your controller at another view and use the same values from the scopes   if that makes sense    You ll also want to consider that any function calls inside of a binding  such as      or ng-bind or ng-bind-html  will have to be evaluated on every digest  because angular has no way of knowing if the value has changed or not like it would with a property on the scope   The  angular  way to do this would be to cache the value in a property on the scope on change using an ng-change event or even a  watch   For example with a static form   angular controller  MainCtrl   function  scope   window        scope count   0      scope total   1       scope updatePercentage   function             scope percentage    window Math round  100    scope count     scope total                lt form name  calcForm  gt      lt label gt Count  lt input name  count  ng-model  count                     ng-change  updatePercentage                      type  number  min  0  required  gt  lt  label gt  lt br  gt      lt label gt Total  lt input name  total  ng-model  total                    ng-change  updatePercentage                      type  number  min  1  required  gt  lt  label gt  lt br  gt      lt hr  gt     Percentage    percentage    lt  form gt    And now you can test it   describe  Testing percentage controller   function       var  scope   null    var ctrl   null       you need to indicate your module in a test   beforeEach module  plunker        beforeEach inject function  rootScope   controller         scope    rootScope  new         ctrl    controller  MainCtrl            scope   scope                   it  should calculate percentages properly   function          scope count   1       scope total   1       scope updatePercentage        expect  scope percentage  toEqual 100         scope count   1       scope total   2       scope updatePercentage        expect  scope percentage  toEqual 50         scope count   497       scope total   10000       scope updatePercentage        expect  scope percentage  toEqual 5     4 97  rounded up        scope count   231       scope total   10000       scope updatePercentage        expect  scope percentage  toEqual 2     2 31  rounded down

User · Answer

If you re looking to do a simple round in Angular you can easily set the filter inside your expression  For example      val   number 0     See this CodePen example  amp  for other number filter options   Angular Docs on using Number Filters

[angularjs] Math functions in AngularJS bindings

Examples related to angularjs