ダイナミックフォームアンギュラ問題

Question

私は合計と総計が自動更新されないdynamic form 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(); 
    }; 
}); 

Answer 1

ng-bindは、$scopeでなければなりません。ビューバインディングで$scopeを言及する必要はありませんが、コントローラの$scope/this（コンテキスト）を直接参照しています。

これ以外にも、すべての入力フィールドに対して双方向バインディングを有効にするために、すべての入力の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)" 

Forked JSFiddle

Answer 2

使用

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

代わりの

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

アップ日付がつかれたフィドルhttp://jsfiddle.net/Lhkedykz/17/