javascript - Angularjs/js 用于从输入计算 $eval

Question

我的输入字段很少。我想通过输入给出一个简单的公式。这些值也来自输入。

input1 给出长度，input2 给出高度，input3 给出宽度，input4 给出一些参数，最后input5 给出公式。我想根据输入的公式显示结果。

到目前为止，我已经成功地做到了:plunker .

 <div>
  <h1>Calculate</h1>
  <li>
    Length : <input ng-model="l" type="number">
  </li>
  {{value.length}}
  <li>
    height : <input ng-model="h" type="number">
  </li>
  <li>
    width : <input ng-model="w" type="number">
  </li>
  <li>
    parameter : <input ng-model="p" type="number">
  </li>
  <li>
    formula : <input ng-model="formula"><br>
    formula can be anything;2+l,l+h,2*l*(l+h+w*p)
  </li>
  <li>
    Result :{{$eval(formula) }}
  </li>
</div>

我想验证公式输入，以便除了 l、h、w、p 以及数字和运算符之外不能输入其他字符。 我可能以错误的方式做这件事，如果是这样，请提供一些见解或示例。

谢谢。

Answer 1

我已经为您实现了一个解决方案。我用过 Math.Js评估您的表达式，因为它是用于此类操作的非常强大的库。在此代码中，还处理异常并为未知字符抛出错误。希望这对您有所帮助。谢谢。

 var app = angular.module("Demo", []);
 app.controller("AppController", function($scope) {
   $scope.syntexError = false;

   $scope.Calculate = function() {
     var result = $scope.result;
     try {
       $scope.result = math.eval($scope.ReplaceVariable($scope.formula, $scope.l, $scope.h, $scope.w, $scope.p));
       $scope.syntexError = false;
     } catch (e) {
       if (e.message.indexOf("Undefined symbol") != -1) {
         $scope.syntexError = true;
       }
       return result;
     }
   }

   $scope.ReplaceVariable = function(formula, length, height, width, parameter) {
     formula = angular.lowercase(formula);
     formula = formula.replace(/l/g, length);
     formula = formula.replace(/h/g, height);
     formula = formula.replace(/w/g, width);
     formula = formula.replace(/p/g, parameter);
     return formula;
   }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <div>
      <h1>Calculate</h1>
      <li>
        Length :
        <input ng-model="l" type="number">
      </li>
      {{value.length}}
      <li>
        height :
        <input ng-model="h" type="number">
      </li>
      <li>
        width :
        <input ng-model="w" type="number">
      </li>
      <li>
        parameter :
        <input ng-model="p" type="number">
      </li>
      <li>
        formula :
        <input ng-model="formula" ng-change="Calculate()">
        <br>formula can be anything;2+l,l+h,2*l*(l+h+w*p)
        <br/>
        <span ng-show="syntexError">Invalid characters.</span>
      </li>
      <li>
        Result : {{ result }}
      </li>
    </div>
  </div>
</div>