入力からの$ eval計算のためのAngularjs/js

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>