我有一个带有2个文本框的HTML文件，一个文本框用于表示值，另一个文本框用于表示数量。底部的结果文本将值乘以数量并显示结果。
目的是在屏幕上显示成对的文本框的所有行的总和。为此，我有一个“添加新”按钮，该按钮不断添加其他对文本框。
出现在HTML上的第一组文本框反映了包含属性“ val”和“ qty”的对象的“ numbers”数组的大小。相同的值绑定到文本框。
但是，仅第一组值被添加到屏幕上。当我不断添加新的文本框并输入新的值时，结果的值应该相应地更改，但实际上并没有改变。
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;
}）;
我在这里做错了什么？
在您的代码中，总和的计算将只执行一次。
您需要添加范围的监视或将函数绑定到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;
};
});
我除了这个问题有点了解，但是您可以在单个输入字段内执行任意算术运算：
<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>基于Pylinux的答案：看起来似乎很明显，但是在这里。如果要添加2个表达式，请使用以下命令： {{$eval(expression1)+ $eval(expression2) }}
控制器中的代码仅被激活一次（渲染视图时）。因此，您的总和仅计算一次，甚至没有机会添加任何行。您需要做的是将计算结果放入函数中，以便可以根据需要重复调用它。
Tong的回答基本上是正确的，但是我认为这是一种更好的方法：
<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>
和
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;
}
})
定义一个total函数，该函数循环遍历数组并返回适当的和。然后，您可以将该函数绑定到视图中的结果字段。这样做的好处是您不必记住在可能导致总数变化的任何地方调用update()（例如在文本框和ng-change函数中的deleteNumber）。总数会自动更新。
这里是demo。
Php
角度
帮助TT