Я написал этот код онлайн- динамической формы jsFiddle code
Общая сумма и сумма не обновляются автоматически. Раньше у меня был более простой пример, и он работал с одним элементом модели, но потом я создал массив, и теперь он не будет работать. Моя реальная программа, которую я создаю, будет иметь еще много полей, и я пытаюсь создать предварительный пример, чтобы показать, что он будет работать. Может кто-нибудь быстро увидеть ту тупую вещь, которую я забываю?
<div ng-controller="MyCtrl">
<form name="myForm">
<div ng-repeat="item in items track by $index">
<input type="text" ng-model="item.a">
<input type="text" ng-model="item.b">
<input type="text" ng-model="item.c">
<label>Total: </label><label ng-bind="total(item)"></label>
</div>
</form>
<div>
<label>Grand Total: </label><label ng-bind="grandTotal()"></label>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.items = [
{
a: 0, b: 0, c: 0
},
{
a: 0, b: 0, c: 0
}];
$scope.total = function(item) {
var result = item.a * item.b * item.c;
return isNaN(result) ? 0 : result;
};
$scope.grandTotal = function() {
var result = 0;
angular.forEach($scope.items, function(item) {
result += $scope.total(item);
});
return isNaN(result) ? "" : result.toString();
};
});
ng-bind
должен быть без $scope
. Вам не нужно указывать привязку $scope
в привязке вида, она напрямую ссылается на $scope
/this
(context) контроллера.
Помимо этого дополнительно меняют все входные ng-bind
на ng-model
чтобы обеспечить двустороннюю привязку ко всем полям ввода.
наценка
<input type="text" ng-model="item.a">
<input type="text" ng-model="item.b">
<input type="text" ng-model="item.c">
ng-bind="total(item)"
использование
<input type="text" ng-model="item.a">
вместо
<input type="text" ng-bind="item.a">
Обновлена скрипка http://jsfiddle.net/Lhkedykz/17/
$scope
я не вижу, чтобы он отображал итогиng-bind
наng-model
для своего<input>
. Добавьте это к своему ответу.