Динамическая форма Угловой выпуск

0

Я написал этот код онлайн- динамической формы 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();
    };
});
Теги:
data-binding
angular-ngmodel
ng-bind

2 ответа

1
Лучший ответ

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

Вилка JSFiddle

  • 0
    Хороший улов, но даже с удаленным $scope я не вижу, чтобы он отображал итоги
  • 0
    Он должен изменить ng-bind на ng-model для своего <input> . Добавьте это к своему ответу.
Показать ещё 6 комментариев
1

использование

<input type="text" ng-model="item.a">

вместо

<input type="text" ng-bind="item.a">

Обновлена скрипка http://jsfiddle.net/Lhkedykz/17/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню