从输入

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>