2013-10-21 13 views
6

着信ファクトリ(およびクライアント側からリアルタイムで)からいくつかの数値を集計する関数を作成しようとしています。ビューの合計。完全に詰まった。ファンクションを使用してビューに配置する角度の合計数値

1 - まず、コントローラの機能内で組み立てられた変数を表示する方法を理解していません。私はTOTALNUMBERがビューに表示するために取得するにはどうすればよい

$scope.total = function() { 
    var totalNumber = 0; 

} 

それでは、私のようなものを持っているとしましょうか?私はこれを取得した後

私は工場出荷時のデータを総括するためには、前提としています

$scope.total = function() { 
var totalNumber = 0; 
    for(i=0; i<revenues.length; i++){ 
     totalNumber = totalNumber + revenues[i].amount 
    } 

    } 

これは正しいです:

var revenues = [ 
      { amount: 1254 }, 
      { amount: 1654 }, 
      { amount: 33 }, 
      { amount: 543 } 

    ]; 

は、私のような何かをするだろうか?収益の配列を動的に変更すると、リアルタイムで更新されますか?

+0

変数をスコープにバインドする必要があります。 '$ scope.totalNumber = 0'です。 – whirlwin

+2

total()の定義は何でも、{{total()}} –

+0

@whirlwinは動作しません。その値を表示することはできません。何も表示されず、varを追加するとエラーが返されます –

答えて

8

約束どおり、ここでは別のアプローチがあります。

<div ng-app ng-controller="SumCtrl"> 

    Total: {{total}} 

    <input type="text" ng-model="newAmount" /> 
    <button ng-click="add(newAmount)">Add</button> 

</div> 

とJavaScript:revenuesコレクションを監視し、それが変わるたびに値を更新ワン

function SumCtrl($scope) { 

    function total() { 
    var totalNumber = 0; 
    for(var i=0; i<$scope.revenues.length; i++){ 
     totalNumber = totalNumber + $scope.revenues[i].amount 
    } 

    return totalNumber; 
    } 

    $scope.revenues = [ 
    { amount: 1254 }, 
    { amount: 1654 }, 
    { amount: 33 }, 
    { amount: 543 } 
    ]; 

    $scope.add = function(value) { 
    $scope.revenues.push({ amount: parseInt(value) }); 
    } 

    $scope.$watchCollection("revenues", function() { 
    $scope.total = total(); 
    }); 

} 
+0

This素晴らしい解決策のように見えますが、私は$ watchCollectionメソッドを動作させることができません。これは私の工場の問題かもしれないと思いますか?コード:http://plnkr.co/edit/iDmphw –

+0

どのバージョンのAngularを使用していますか? '$ watchCollection'は新しいものだと思います。 1.2rc3です。私はそれが1.0.8だとは思わない。 '$ watchCollection'が利用できない場合は、' deep watch 'フラグをtrueに設定して '$ watch'を使うことができます($ watchCollectionが良いですが)。 '$ watch(" revenue "、function(){}、true); ' –

+0

あなたは正しいです。私は私のバージョンを更新する必要があります! (私はRailsで宝石を使っています)。私を非常に助けてくれてありがとう、おそらくいつか私はあなたのようにスマートな角度のユーザーになるでしょう! :D –

0

これを解決する方法はいくつかあります。

<div ng-app ng-controller="SumCtrl"> 

    Total: {{total()}} 

    <input type="text" ng-model="newAmount" /> 
    <button ng-click="add(newAmount)">Add</button> 

</div> 

をそしてここでのコードです:あなたはtotal()機能が必要な場合、それはこのように書きます

function SumCtrl($scope) { 

    $scope.revenues = [ 
    { amount: 1254 }, 
    { amount: 1654 }, 
    { amount: 33 }, 
    { amount: 543 } 
    ]; 

    $scope.total = function() { 
    var totalNumber = 0; 
    for(var i=0; i<$scope.revenues.length; i++){ 
     totalNumber = totalNumber + $scope.revenues[i].amount 
    } 

    return totalNumber; 
    } 

    $scope.add = function(value) { 
    $scope.revenues.push({ amount: parseInt(value) }); 
    } 

} 

total()機能はいつでも再評価されますスコープの変更(ロット)。より良いアプローチは、revenuesへの変更を監視し、静的な値を更新することです...私はその回答も投稿します。

0

ここでこれを行うための複数の方法がありますplunker

だ、と工場のデータがどのように見えるかによって、コントローラが異なるように見える場合があります。

編集:私が書いている間、ここに良い回答がいくつか掲載されました。これはBrianの最初のアプローチに似ています。

関連する問題