AngularJS: Pass arithmetic operators to ng-value

Question

I am new to AngularJS.

I am starting with simple calculator application which does operation + - * and /.

Module: myMdl.js

var ap = angular.module("myMdl", [])

Controller: myCtrl1.js

ap.controller("myCtrl1", function($scope) {
  $scope.Number1 = "1";
  $scope.Number2= "2";
});

View: Calculator.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<h1> Calculator Application </h1>

<div ng-app="myMdl" ng-controller="myCtrl1">
    <br>
    Select Operator:
    <ul>
     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="+" checked/>  + <br>
     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="-" />  -  <br>
     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="*"/>  *  <br>
     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="/"/>  /  <br>
    </ul>               
    Enter Value's: 
    <ul>
        <input type="number" ng-model="Number1" value="{{Number1}}" /> <br>
        <input type="number" ng-model="Number2" value="{{Number2}}" /> <br>
    </ul>
    Result: <br>
    <ul>
        <input type="number" ng-model="result" value="{{Number1 + Mdloperator + Number2}}" placeholder="Result"/>
    </ul>
</div>

<script src="myMdl.js"></script>
<script src="myCtrl1.js"></script>

</body>
</html>

Stanislav Kvitash · Accepted Answer · 2017-11-21 15:45:05Z

1) ngValue expects expression, but simple + sign is not a valid expression, it will give errors in the console, that is why you have to work with strings, when populating your type="radio" elements.

2) As you are dealing with strings, you have to use $parse service to evaluate this string into result.

3) There is no need to use ngModel together with value="{{...}}" on the input type="number" elements.

See example here:

angular.module("myMdl", [])
.controller("myCtrl1", function($scope, $parse) {
  var ctrl = this;
  
  ctrl.Mdloperator = '/';
  ctrl.Number1 = 1;
  ctrl.Number2 = 2;
  
  ctrl.getValue = function(val){
   return angular.isString(val) ? $parse(val)($scope) : val;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<h1> Calculator Application </h1>

<div ng-app="myMdl" ng-controller="myCtrl1 as $ctrl">
    <br>
    Select Operator:
    <ul>
     <input ng-repeat-start="op in ['+', '-', '*', '/'] track by $index" type="radio" ng-model="$ctrl.Mdloperator" name="operator" ng-value="op" />  {{::op}} <br ng-repeat-end/>
    </ul>               
    Enter Value's: 
    <ul>
        <input type="number" ng-model="$ctrl.Number1"  /> <br>
        <input type="number" ng-model="$ctrl.Number2" /> <br>
    </ul>
    Result: <br>
    <ul>
        <input type="number" value="{{$ctrl.getValue($ctrl.Number1 + $ctrl.Mdloperator + $ctrl.Number2)}}" placeholder="Result"/>
    </ul>
</div>

Noushad · Accepted Answer · 2020-01-02 14:05:50Z

The problem lies at value="{{Number1 + Mdloperator + Number2}}" javascript converts a number datatypes to string when you use + operator on integers with string.

One of the solutions can be:

    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        </head>
        <body>
            <h1> Calculator Application </h1>
            <div ng-app="myMdl" ng-controller="myCtrl1">
                <br/>
                <span>Select Operator:</span>
                <ul>
                    <input type="radio" ng-model="Mdloperator" name="operator" ng-value="+" checked/>+<br/>
                     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="-" />-<br/>
                     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="*"/>*<br/>
                     <input type="radio" ng-model="Mdloperator" name="operator" ng-value="/"/>/<br/>
                </ul>               
                <span>Enter Value's:</span>     
                <ul>
                    <input type="number" ng-model="Number1" value="{{Number1}}" /> <br/>
                    <input type="number" ng-model="Number2" value="{{Number2}}" /> <br/>
                </ul>
                <span>Result:</span><br/>
                <div ng-switch="Mdloperator">
                   <span ng-switch-when="+">{{Number1 + Number2}}</span>
                   <span ng-switch-when="-">{{Number1 - Number2}}</span>
                   <span ng-switch-when="*">{{Number1 * Number2}}</span>
                   <span ng-switch-when="/">{{Number1 / Number2}}</span>
                </div>
            </div>

            <script src="myMdl.js"></script>
            <script src="myCtrl1.js"></script>
        </body>
</html>

Collectives™ on Stack Overflow

AngularJS: Pass arithmetic operators to ng-value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related