AngularJS Math issue

Question

I am trying to do some math with user inputs.

I have this basic objets to start with

$scope.shape = 
{id: 1, cx: 0, cy: 0, result: 0}
;

And the user can type the value of cx and cy into fields;

 <input ng-model="shape.cx" type="text" class="form-control" id="cx">
 <input ng-model="shape.cy" type="text" class="form-control" id="cy">

I want to multiply the 2 values cx and cy and show the result in another input.

<input type="text" class="form-control" id="A" ng-model="shape.cx * shape.cy">

This is working, I can see the the result in the field but I get an error;

Error: [ngModel:nonassign]

I would also like to asign this result to shape.result.

How can I set the value of shape.result to be shape.cx*shape.cy

Amulya Kashyap · Accepted Answer · 2016-03-12 17:09:42Z

See here it could be done like this :

SCENARIO 1 : Result on Button Click : (Procedural Approach)

<input ng-model="shape.cx" type="text" class="form-control" id="cx">
 <input ng-model="shape.cy" type="text" class="form-control" id="cy">
 <input type="button" class="form-control" ng-click="calculate()">
 <input type="text" class="form-control" id="A" ng-model="shape.result">
 $scope.calculate = function(){
 $scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
}

SCENARIO 2 : As soon as Value Changes in text boxes : (Direct Approach)

<input ng-model="shape.cx" type="text" class="form-control" id="cx">
 <input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">

SCENARIO 3 : Using $watch : (Procedural Approach)

 <input ng-model="shape.cx" type="text" class="form-control" id="cx">
     <input ng-model="shape.cy" type="text" class="form-control" id="cy">
     <input type="text" class="form-control" id="A" ng-model="shape.result">

    $scope.$watch(function (){
        $scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
    });

Note :

Scenario 3 is using $watch hence it should be not used untill and unless you're in real need of it.
Scenario 1 is best suited to you I think as it will make your concept.
Scenario 2 is a direct approach hence should be used after gaining some knowledge as well as experience(But it's short & best within 3 scenatios). It's a reference from @tapos answer

Thanks & Cheers

If I watch for result will it work as well since result is watching for something else?

Bata · Accepted Answer · 2016-03-12 17:07:37Z

2

Well you need to watch for cy and cx changes and do the calculation when it change.

$scope.$watch('shape.cx', function() {
    $scope.shape.result = $scope.shape.cx * $scope.shape.cy;
});

Example fiddle: http://jsfiddle.net/ccmf07k2/

answered Mar 12, 2016 at 17:07

Bata

6513 silver badges7 bronze badges

Comments

tapos ghosh · Accepted Answer · 2016-03-12 16:54:12Z

1

Every language input field is string when a user enter any number in text box it is string

<input ng-model="shape.cx" type="text" class="form-control" id="cx">
 <input ng-model="shape.cy" type="text" class="form-control" id="cy">

so you need some work in your result box ix

<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">

then you get your appropriate result

answered Mar 12, 2016 at 16:54

tapos ghosh

2,22226 silver badges38 bronze badges

Collectives™ on Stack Overflow

AngularJS Math issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related