Angularjs/js for $eval calculation from input

Question

I have few input fields.I want to solve a simple formula by given from input. The values comes from the input too.

input1 gives length, input2 gives height, input3 gives width, input4 gives some parameter, and finally input5 is for formula. I want to display the result according to the formula entered.

So far I have successfully done this: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>

I want to validate the formula input so that no other character other than l,h,w,p and numbers and operator can be entered. I might be doing it in wrong way,If so provide some insight or examples.

Thank you.

If formula can be anything. How can you be sure that the formula would have the l, h, p , w models to create it? — Sajal
– Sajal, Commented May 17, 2016 at 12:16
Here is a start : use ng-pattern with the appropriate regexp. Something like [0-9lhwp+*/()-]+ can be a start. — Walfrat
– Walfrat, Commented May 17, 2016 at 12:21

Sk. Tajbir · Accepted Answer · 2016-05-17 18:36:28Z

1

I've implemented a solution for you. I've used Math.Js to evaluate your expression as it is very strong library for this kind of operation. In this code exceptions are also handled and error is thrown for unknown characters. Hopefully this will be helpful for you. Thanks.

 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>

answered May 17, 2016 at 18:36

Sk. Tajbir

2902 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bikash Ramtel Over a year ago

Thank you for your precious effort and answer.This exactly what I need to do. Now I am gonna try to implement this in filter.

Sk. Tajbir Over a year ago

I'm glad I was able to help. Thanks.

Collectives™ on Stack Overflow

Angularjs/js for $eval calculation from input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related