Why Math.floor return nothing when we write it into HTML angular?

Question

Here is my HTML:

<div ng-controller = "myCntrl">  
    <pre>floor 1: {{Math.floor( value )  }}</pre>  
    <pre>floor 2: {{value }}</pre>  
    <pre>floor 3: {{value | number : 0 }}</pre>  
    <pre>floor 1 from controller: {{newValue }}</pre>  
</div>

Controller

app.controller('myCntrl', function ($scope) {
    $scope.value = 1233.8435;
    $scope.newValue = Math.floor(1233.8435);    
});

The output:

floor 1: 
floor 2: 1233.8435
floor 3: 1,234
floor 1 from controller: 1233

Generally I'm looking for the proper way to get 1233.

I don't want to invoke new method in controller.

Why Math.floor returns nothing?

Thanks,

Demo Fiddle

This should actually be included in the Angular docs: "expressions are not JavaScript eval. Check out the following example..." — Kos Prov
– Kos Prov, Commented Nov 25, 2013 at 15:51
Actually, it is: "It might be tempting to think of Angular view expressions as JavaScript expressions, but that is not entirely correct, since Angular does not use a JavaScript eval() to evaluate expressions." (docs.angularjs.org/guide/expression) — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Nov 25, 2013 at 15:53

Sergiu Paraschiv · Accepted Answer · 2013-11-25 15:46:56Z

20

In this case, AngularJS <span>{{value}}</span> (expression) is shorthand for <span ng-bind="value"></span> and ng-bind acts on the current scope.

Your current scope is the one defined by myCntrl so ng-bind="value" is evaluated as $scope.value.

AngularJS has no way of making a distinction between the global Math namespace and $scope.Math, so it treats it like any other scoped expression.

I'd advise against using $scope.Math=Math;.

The correct way to do it is using a filter:

angular.module('myApp',[]).filter('floor', function(){

    return function(n){
        return Math.floor(n);
    };
});

answered Nov 25, 2013 at 15:46

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kos Prov Over a year ago

+1 for that. Maybe you could skip the wrapper function and return Math.floor;

brcpar Over a year ago

+1 for doing it the angular way. This is a much better answer than the accepted answer.

Chandermani · Accepted Answer · 2013-11-25 15:38:57Z

13

Expressions are evaluated on the $scope. If you do this in your controller

$scope.Math=Math;

it would work.

answered Nov 25, 2013 at 15:38

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Comments

fauverism · Accepted Answer · 2013-11-25 15:41:58Z

1

Put it in your controller

<div ng-controller = "myCntrl">  
  <pre>floor 1: {{Mathvalue}}</pre>  
  <pre>floor 2: {{value }}</pre>  
  <pre>floor 3: {{value | number : 0 }}</pre>  
</div>

var app = angular.module('myModule', []);

app.controller('myCntrl', function ($scope) {
  $scope.value = 1233.8435; 
  $scope.Mathvalue = Math.floor(1233.8435);
});

app.$inject = ['$scope'];

answered Nov 25, 2013 at 15:41

fauverism

1,9924 gold badges36 silver badges62 bronze badges

Comments

Sean · Accepted Answer · 2013-11-25 15:39:51Z

0

Angular expression doesn't support all javascript method, for example Math.floor(), you can declear a floor function on your $scope and delegete Meth floor

answered Nov 25, 2013 at 15:39

Sean

3,0722 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Why Math.floor return nothing when we write it into HTML angular?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related