html - 使用 angularjs，如何对文本框执行数学运算并在输入值时查看结果？

Question

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

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

出现在 HTML 上的第一组文本框反射(reflect)了包含属性“val”和“qty”的对象“numbers”数组的大小。相同的值绑定(bind)到文本框。

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

HTML代码

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

});

我在这里做错了什么？

Answer 1

在您的代码中，总和的计算只会执行一次。

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

例如，你可以这样做:

<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>

和:

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