動的テーブルとangularjsとの双方向データバインディング？

Question

私は動的な行作成を行うテーブルを作成しています。

を2番目の列は製品の量を含有するであろう次のように毎回ユーザは、新しい行が作成され、ボタンをクリックします。ですから、bg-modelとng-bindを使って2列目のデータバインディングを表示するために、2番目の列のすべての値を合計したいと思います。したがって、ユーザーが1つを入力すると、valusが自動的に更新されます。私は行が動的であるという点でそれについての手掛かりはありません！

固定数の要素については動作しますが、私は動的生成では無駄です。助けて？

Answer 1

我々が最初にセットアップ使用するオブジェクトと、おそらくので、角度がデータバインディング我々は、テーブルの行のngのリピートをバインドすることができますで動作する方法のいくつかの例のデータ

$scope.ourTableArray = []; 
$scope.ourTableArray.push({'textColumn': 'example text', 'valueColumn': 10}); 

に置く必要があります私たちのすべての値が含まれます配列：

<tr ng-repeat="row in ourTableArray"> 
    <td><input type="text" ng-model="row.textColumn"</td> 
    <td><input type="number" ng-model="row.valueColumn"</td> 
</tr> 

次は行を追加する方法が必要ですので、我々はいくつかのボタンからクリックngの上で呼び出すための関数を作成することによってそれを行うことができます。これは、私たちがハードコード最初の例の値に使用されたフォーマットに従って、当社の$scope.ourTableArrayに移入されます。

$scope.addRow = function(){ 
    $scope.ourTableArray.push({'textColumn': '', 'valueColumn': 0}); 
} 

今ngのリピートが設定されていることを私たちは値を計算する方法を持っている必要があります。それを解決するには、私たちのオブジェクトから私たちのvalueColumnを合計する関数を作成することです：出力するには

$scope.calculateTotal = function() { 
    var count = 0; 
    for(row in $scope.ourTableArray){ 
     count += $scope.ourTableArray[row].valueColumn; 
    } 
    return count; 
} 

私たちの私たちがしなければならないすべては私達のページ内で、この関数を呼び出して、新しい合計。

Current Total of 2nd column: {{calculateTotal()}} 

を要約すると：私は上記したように、我々はNG-repeatが私たちの配列にバインドさ持っているので、いつでも私たちは（どちらか、行を追加する行を削除し、行の値を編集することによって）配列を変更し、それをテーブルの中にすぐに反映されます。さらに、$calculateTotal()関数の結果を出力しているので、配列内の値の1つを変更するといつでも変更されます。

Codepen Example

Answer 2

ID、名前、値を持つオブジェクトの表と、スコープの新しいデータを追加する関数を作成できます。あなたのコントローラでは、単純にすべての値を合計する機能と、IDでテーブルからオブジェクトを編集する機能を追加できます。

この表のng-repeatとして、表示します。 合計と編集を伴うng-repeat add関数のすべての入力に適用します。

私はこれを私のプロジェクトの1つで行いましたが、それがうまくいくとしても、それはどうやってやるべきかとは思いません。あなたが望めばそれを試すことができます。