如何在角度中计算表达式运行时

时间:2016-03-27 19:10:28

标签: angularjs data-binding angularjs-scope

我是角色新手并试图在运行时以角度评估表达但失败。这是我的代码

<!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>

此区域未动态评估。有没有办法在不使用范围中定义的任何自定义函数并从表达式调用它的情况下执行此操作?

修改

我也尝试了这种方式,但失败了。

<!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>

我纠正了我的

<!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>

1 个答案:

答案 0 :(得分:1)

您无法直接在角度绑定内的HTML上使用javascript native方法。基本上你写的任何东西都是由$parse API用范围值间接评估的。所以parseInt方法不在控制器范围内,那么它就不会在那里进行评估。

我说创建一个可以进行任何所需计算的方法。

<强>标记

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

<强>代码

$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