CODEWITHSUNDEEP
htmlangularjsfrontend
Divyanth Jayaraj
Divyanth Jayaraj

Reputation: 960

Using angularjs, how to perform math operations on textboxes and see result as the values are being typed in?

I have an HTML file with 2 textboxes, one for value and the other for quantity. The result text at the bottom multiplies value with quantity and show the result.

The intention is to show the sum of all the rows of pairs of textboxes on the screen. To that end, I have an "add new" button which keeps adding additional pairs of textboxes.

The first set of textboxes that appear on the HTML, reflect the size of the "numbers" array of objects containing properties "val" and "qty". The same values are bound to the textboxes.

However, only the first set of values are added on screen. As I keep adding new textboxes and entering new values, the value of the result should change accordingly, but it simply doesn't.

HTML Code 

    <div ng-app="adder" ng-controller="addcontrol">
        <table>
        <tr>
            <th>Value</th><th>Quantity</th>
        </tr>
        <tr ng-repeat="number in numbers">
            <td><input type="text" ng-model="number.val"></td>
            <td><input type="text" ng-model="number.qty"></td>
            <td><input type="button" ng-click="deleteNumber($index)" value= "Delete"></td>pp',[]);
        </tr>
        </table>
        <input type="button" ng-click="add()" value="Add new">Result : {{sum}}
    </div>
</body>
</html>

Javascript

var myapp = angular.module('adder', []);
myapp.controller('addcontrol',function($scope){
$scope.numbers = [
    {val:100,
     qty:200,
    }

];

$scope.add = function()
{
    $scope.numbers.push({val:0,qty:0});
};

$scope.deleteNumber = function(val)
{
    numbers.splice(val, 1);
};
var result=0;
angular.forEach($scope.numbers, function(num){
    result+=(num.val * num.qty);

});
$scope.sum = result;

});

What am I doing wrong here?

Upvotes: 3

Views: 19760

Answers (5)

Rhea
Rhea

Reputation: 1

Php

  1. Create a database named as students(using cmd)
  2. Create a table named as tbl_students_info with column:
    • id, data type is int with size of 11, auto increment and set as primary key
    • Firstname, data type is varchar with size of 30
    • Middlename, data type is varchar with size of 30
    • Lastname, data type is varchar with size of 30
    • Contact, data type is int with size of 11
    • House_address, data type is int with size of 50
  3. Create a webpage that contains 5 textbox and 1 button. 1st textbox is for firstname, 2nd textbox is for middlename, 3rd textbox is for lastname, 4th textbox is for contact, last textbox is for house_address and button for saving the input data in those texboxes to database

Angular

  1. Create a calculator that computes the sum of 2 numbers, product of 2 numbers, difference of 2 numbers and quotient of 2 numbers. The web page must contain 2 textbox and 4 buttons for the operations.
  2. Create a wepage that computes the area of a triangle. Must have 2 textbox and a button for calculate area.
  3. Create a website that calculate the age of the user. Must have a textbox and a button, textbox is for input birth year and button for compute age. Note: no need for exact months.

Help TT

Upvotes: 0

Erik K.
Erik K.

Reputation: 1062

Based on Pylinux's answer: it may seem obvious, however here it is. If you want to add 2 expressions, use the following:

{{$eval(expression1)+ $eval(expression2) }}

Upvotes: 1

Pylinux
Pylinux

Reputation: 11816

I know this a little bit besides the question but you can do arbitrary arithmetic operations inside a single input field: 

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

<body ng-app="">
  <input ng-model="expression"/>
  <p>{{$eval(expression)}}</p>
</body>

Upvotes: 2

Jerrad
Jerrad

Reputation: 5290

The code in your controller is only activated once (when the view is rendered). Therefore, your sum is only computed once, before you even get a chance to add any rows. What you need to do is put your calculation into a function so that it can be called repeatedly as needed.

Tong's answer is basically correct, but I think this is a nicer way to do it:

 <div ng-controller="addcontrol">
    <table>
    <tr>
        <th>Value</th><th>Quantity</th>
    </tr>
    <tr ng-repeat="number in numbers">
        <td><input type="text" ng-model="number.val"></td>
        <td><input type="text" ng-model="number.qty"></td>
        <td><input type="button" ng-click="deleteNumber($index)" value= "Delete"></td>
    </tr>
    </table>
    <input type="button" ng-click="add()" value="Add new">Result : {{total()}}
  </div>

and

var app = angular.module('app', [])
.controller('addcontrol', function($scope) {
  $scope.numbers = [{
    val: 100,
    qty: 200,
  }];

  $scope.add = function() {
    $scope.numbers.push({
      val: 0,
      qty: 0
    });
  };

  $scope.deleteNumber = function(val) {
    $scope.numbers.splice(val, 1);        
  };


  $scope.total = function(){
    var total = 0;
    angular.forEach($scope.numbers, function(num) {
      total += (num.val * num.qty);
    });
    return total;
  }
})

Define a total function that loops through the array and returns the appropriate sum. Then you can bind that function to the result field in the view. The benefit of doing it this way is that you don't have to remember to call update() everywhere that might cause the total to change (like ng-change on the textboxes, and in the deleteNumber function). The total just updates automatically.

Here's a demo.

Upvotes: 0

Tong Shen
Tong Shen

Reputation: 1367

In your code, the calculation of the sum would only be executed once.

You need to add a watch of the scope or bind a function to ng-change event in order to keep the sum updated while you change the numbers.

For example, you can do:

<div ng-app="adder" ng-controller="addcontrol">
    <table>
    <tr>
        <th>Value</th><th>Quantity</th>
    </tr>
    <tr ng-repeat="number in numbers">
        <td><input type="text" ng-change="update()" ng-model="number.val"></td>
        <td><input type="text" ng-change="update()" ng-model="number.qty"></td>
        <td><input type="button" ng-click="deleteNumber($index)" value= "Delete"></td>pp',[]);
    </tr>
    </table>
    <input type="button" ng-click="add()" value="Add new">Result : {{sum}}
</div>

And:

var myapp = angular.module('adder', []);
myapp.controller('addcontrol', function($scope) {
  $scope.numbers = [{
      val: 100,
      qty: 200,
    }

  ];

  $scope.add = function() {
    $scope.numbers.push({
      val: 0,
      qty: 0
    });
  };

  $scope.deleteNumber = function(val) {
    numbers.splice(val, 1);
    $scope.update();
  };

  $scope.update = function() {
    var result = 0;
    angular.forEach($scope.numbers, function(num) {
      result += (num.val * num.qty);
    });
    $scope.sum = result;
  };
});

Upvotes: 5

Related Questions