使用angularjs，如何对文本框执行数学运算并在输入值时查看结果？ [英] Using angularjs, how to perform math operations on textboxes and see result as the values are being typed in?

问题描述

我有一个包含2个文本框的HTML文件，一个用于数值，另一个用于数量。底部的结果文本将数值与数量相乘并显示结果。

其目的是显示屏幕上文本框对的所有行的总和。为此，我有一个添加新的按钮，不断添加额外的文本框对。

HTML中出现的第一组文本框反映了包含属性val和qty的numbers数组对象的大小。相同的值绑定到文本框。

但是，屏幕上只添加了第一组值。当我不断添加新的文本框并输入新的值时，结果的值应该相应地改变，但它不会。

HTML代码

 < div ng-app =加法器ng-controller =addcontrol> 
< table> 
< tr> 
< th>值< th>< th>数量< / th> 
< / tr> 
< tr ng-repeat =数字中的数字> 
< td>< input type =textng-model =number.val>< / td> 
< td>< input type =textng-model =number.qty>< / td> 
< td>< input type =buttonng-click =deleteNumber（$ index）value =Delete>< / td> pp'，[]）; 
< / tr> 
< / table> 
< input type =buttonng-click =add（）value =Add new>结果：{{sum}} 
< / div> 
< / body> 
< / html> 
  

Javascript

  var myapp = angular.module（'adder'，[]）; 
 myapp.controller（'addcontrol'，function（$ scope）{
 $ scope.numbers = [
 {val：100，$ b $ qty：200，
} 
 
 $; b 
 $ b $ 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; 
  

}）;

我在这里做错了什么？ 解析方案

的总和只会执行一次。

您需要添加一个范围监视或将函数绑定到 ng-change 事件，以便在更改数字时保持更新总数。

例如，您可以这样做：

 < div ng -app =adderng-controller =addcontrol> 
< table> 
< tr> 
< th>值< th>< th>数量< / th> 
< / tr> 
< tr ng-repeat =数字中的数字> 
< td>< input type =textng-change =update（）ng-model =number.val>< / td> 
< td>< input type =textng-change =update（）ng-model =number.qty>< / td> 
< td>< input type =buttonng-click =deleteNumber（$ index）value =Delete>< / td> pp'，[]）; 
< / tr> 
< / table> 
< input type =buttonng-click =add（）value =Add new>结果：{{sum}} 
< / div> 
  

和：

  var myapp = angular.module（'adder'，[]）; 
 myapp.controller（'addcontrol'，function（$ scope）{
 $ scope.numbers = [{
 val：100，$ b $ q qty：200，
} 
 
 $; b 
 $ b $ scope.add = function（）{
 $ scope.numbers.push（{
 val：0，
数量：0 
}）; 
}; 
 
 $ scope.deleteNumber = function（val）{
 numbers.splice（val，1）; 
 $ scope.update（）; 
}; 
 
 $ scope.update = function（）{
 var result = 0; 
 angular.forEach（$ （num）{
 result + =（num.val * num.qty）; 
}）; 
 $ scope.sum = result; 
}; 
}）; 
  

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?

解决方案

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;
  };
});

这篇关于使用angularjs，如何对文本框执行数学运算并在输入值时查看结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！