How to evaluate expression runtime in angular

Question

i am new in angular and trying to evaluate expression at runtime in angular but failed.this is my code

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
Operant1: <input ng-model="Operant1">
Operantion: <input ng-model="Operantion">
Operant2: <input ng-model="Operant2">
<h1>You entered: {{parseInt(Operant1) parseInt(Operantion)  parseInt(Operant2)}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Operant1 = 2;
    $scope.Operantion = +;
    $scope.Operant2= 3;
});
</script>

</body>
</html>

this area is not evaluate dynamically. is there any way to do it without using any custom function defined in scope and calling it from expression?

EDIT

i tried this way too but fail.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
Operant1: <input ng-model="Operant1">
Operantion: <input ng-model="Operantion">
Operant2: <input ng-model="Operant2">
<h1>You entered: {{Calculate(parseInt(Operant1), Operantion,  parseInt(Operant2))}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Operant1 = 2;
    $scope.Operantion = +;
    $scope.Operant2= 3;

$scope.Calculate= function(op1,opt,op2) {
    if(opt==="+")
    {
        return op1+op2;
    }
    else if(opt==="-")
    {
        return op1-op2;
    }
    else if(opt==="*")
    {
        return op1*op2;
    }
    else if(opt==="/")
    {
        return op1/op2;
    }
}
});
</script>

</body>
</html>

i rectified my mine

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
Operant1: <input ng-model="Operant1">
Operantion: <input ng-model="Operantion">
Operant2: <input ng-model="Operant2">
<h1>You entered: {{ Cal(Operant1, Operantion,  Operant2) }}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Operant1 = 2;
    $scope.Operantion = "+";
    $scope.Operant2= 5;

$scope.Cal= function(op1,opt,op2) {
    if(opt==="+")
    {
        return parseInt(op1)+parseInt(op2);
    }
    else if(opt==="-")
    {
        return parseInt(op1)-parseInt(op2);
    }
    else if(opt==="*")
    {
        return parseInt(op1)*parseInt(op2);
    }
    else if(opt==="/")
    {
        return parseInt(op1)/parseInt(op2);
    }
}
});
</script>

</body>
</html>

I think I see what you're asking now, the answer is no you can't do that see the other comment with the link about how expressions are parsed or read up on the $parse and/or $interpolate source to see what it's doing under the hood — shaunhusain
– shaunhusain, Commented Mar 27, 2016 at 19:37
@shaunhusain does mine updated answer looks good? or seems like an hack.. your thoughts would appreciated.. thanks :-) — Pankaj Parkar
– Pankaj Parkar, Commented Mar 27, 2016 at 19:47

Pankaj Parkar · Accepted Answer · 2016-03-27 20:05:22Z

1

You can't use javascript native methods directly over the HTML inside angular binding. Basically whatever you wrote is indirectly evaluated by $parse API with scope values. So parseInt method isn't there inside controller scope, then it wouldn't evaluated there.

I'd say that create an method that will do whatever required calculation.

Markup

<h1>You entered: {{cal(Operant1, Operantion, Operant2)}}</h1>

Code

$scope.cal = function(op1, op, op2) {
   var op1Parsed = Number(op1), //converting to number
       op2Parsed = Number(op2), //converting to number
       //creating string to be parsed.
       customExpression = op1Parsed + (op || "+") +op2Parsed; 
   //parsing a html manually to make calculation working
   return eval(customExpression);
};

Demo Here

edited Mar 27, 2016 at 20:05

answered Mar 27, 2016 at 19:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

16 Comments

Mou Over a year ago

i want to supply +,-,* etc by textbox. i do not want to hard code + or - etc

Pankaj Parkar Over a year ago

@Mou I got the question by reading it 4th time.. let me update my answer in a few minute..

shaunhusain Over a year ago

Just wanted to add the link to the docs that explain this as well docs.angularjs.org/guide/expression Anywhere in the angular API/reference where it says something about an "angular expression" these rules for parsing apply.

Pankaj Parkar Over a year ago

@shaunhusain I got your point now.. eval would best for this case.. sorry for my mis-interption..Thanks for your valueable comment.. I was thinking in too much in angular way :-D

shaunhusain Over a year ago

@PankajParkar apparently it happens to the best of us... thought you might get a kick out of this plnkr.co/edit/cN4byiptqyLAC7kbrDb1?p=preview seeing that makes me think this could be dangerous but I'm not quite sure how yet.

|

Collectives™ on Stack Overflow

How to evaluate expression runtime in angular

EDIT

i rectified my mine

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

i rectified my mine

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related