Dynamische Form Angular Ausgabe

Question

Ich habe diesen Code geschrieben Online dynamic form jsFiddle code

Die Gesamt und Gesamtsumme sind nicht automatisch aktualisiert werden. Ich hatte vorher ein einfacheres Beispiel und es arbeitete mit einem einzelnen Modellelement, aber dann habe ich ein Array erstellt und jetzt wird es nicht funktionieren. Mein wirkliches Programm, das ich erstelle, wird viele weitere Felder haben und ich versuche ein Vor-Beispiel zu erstellen, um zu zeigen, dass es funktioniert. Kann jemand schnell sehen, was für ein blödes Ding ich vergesse?

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

Answer 1

ng-bind sollte ohne $scope sein. Sie müssen $scope in Sichtbindungen nicht erwähnen, es bezieht sich direkt auf $scope/this (Kontext) des Controllers.

Zusätzlich ändern Sie zusätzlich alle Eingänge ng-bind zu ng-model, um eine bidirektionale Bindung über alle Eingabefelder zu ermöglichen.

Markup

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

Forked JSFiddle

Answer 2

Verwenden

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

statt

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

Up dated fiddle http://jsfiddle.net/Lhkedykz/17/