$scope.$eval() .做一些计算,然后双击结果并键入一个数字,它在结果字段中添加未定义的数字



这是一个简单的角度计算器。面临一些eval()问题。

$scope.$eval()..做一些计算,然后双击结果并输入一个数字,它在结果字段中添加未定义的数字。

我的JS:

    var calculatorApp = angular.module('calculatorApp',[]);
    calculatorApp.controller('calculatorController',calculatorController);
    function calculatorController($scope){
        var operation;
        $scope.value = "" ;
        $scope.resetClicked = function(){
         $scope.value = "";
        }
        $scope.numberButtonClicked = function(bttn_val){
            var toString = bttn_val.toString();
            $scope.value += toString;
        }
        $scope.operationButtonClicked = function(operation_val){
            if(($scope.value == "" || $scope.value == " - ") && (operation_val !="-")){
                    $scope.isDisabled = true;
            }else{
                    $scope.isDisabled = false;
                    $scope.value += ' ' + operation_val + ' ';
            }
        }
        $scope.enterClicked = function(){
                if($scope.value ==""){
                    alert("Please enter numbers to calculate!!");
                }else{
                $scope.value = ($scope.$eval($scope.value));
            }
        }
    }   

我的网页:

<!DOCTYPE html>
<html>
<head>
    <style>     .section{clear:both;padding:0;margin:0}.col{background-color:#f4f4f4;height:20px;text-align:center;display:block;float:left;margin:1% 0 1% 1.6%}.col:first-child{margin-left:0}.col:hover{background-color:#f0f0ff}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.c3of4{width:74.6%}.c1of4{width:23.8%}
    </style>
</head>
<body>
    <!-- Declare the View -->
    <div ng-app="calculatorApp" ng-controller="calculatorController" style="width:500px;color:black">
        <div class="section group"> <!-- Display the result row -->
            <div class="col c3of4">{{value}}</div>
            <div ng-click="resetClicked()" class="col c1of4">C</div>
        </div>
        <div class="section group"> <!-- Display the 1st number row -->
            <div ng-click="numberButtonClicked(1)" class="col c1of4">1</div>
            <div ng-click="numberButtonClicked(2)" class="col c1of4">2</div>
            <div ng-click="numberButtonClicked(3)" class="col c1of4">3</div>
            <div ng-click="operationButtonClicked('+')" class="col c1of4">+</div>
        </div>
        <div class="section group"> <!-- Display the 2nd number row -->
            <div ng-click="numberButtonClicked(4)" class="col c1of4">4</div>
            <div ng-click="numberButtonClicked(5)" class="col c1of4">5</div>
            <div ng-click="numberButtonClicked(6)" class="col c1of4">6</div>
            <div style="float:right" ng-click="operationButtonClicked('*')" ng-disabled="isDisabled" class="col c1of4">*</div>
        </div>
        <div class="section group"> <!-- Display the 3rd number row -->
            <div ng-click="numberButtonClicked(7)" class="col c1of4">7</div>
            <div ng-click="numberButtonClicked(8)" class="col c1of4">8</div>
            <div ng-click="numberButtonClicked(9)" class="col c1of4">9</div>
            <div ng-click="operationButtonClicked('-')" class="col c1of4">-</div>
        </div>
        <div class="section group"> <!-- Display the 3rd number row -->
            <div ng-click="numberButtonClicked(0)" class="col c1of4">0</div>
            <div ng-click="numberButtonClicked('.')" class="col c1of4">.</div>
            <div ng-click="enterClicked()" class="col c1of4">Result</div>
            <div style="float:right" ng-click="operationButtonClicked('/')" class="col c1of4">/</div>
        </div>
    </div>
</body>
</html>

在 numberButtonClicked 函数中更改脚本,如下所示:

$scope.numberButtonClicked = function(bttn_val){
   if($scope.value == undefined){
     $scope.value = "";
   }
   var toString = bttn_val.toString();
   $scope.value += toString;
}

$eval计算角度 js 中的表达式。当您单击结果时,它会为您提供一个字符串作为结果,而不是一个角度表达式,该表达式在第二次单击结果按钮后计算结果为 undefined。

最新更新