AngularJSリストの動的合計

Question

私は自分のアプリケーションのangularJS ontopを使用しています。

私は、コントローラの基本的な例があります：私のHTMLは次のようになります

function OrderListCtrl($scope, $http) { 
    $http.get('/static/angular/app/phones/van1.json').success(function(data) { 
    $scope.van1 = data; 
    }); 

    $http.get('/static/angular/app/phones/van2.json').success(function(data) { 
    $scope.van2 = data; 
    }); 

}

とサンプルJSONエントリ

{ 
     "id": "3", 
     "custName": "Mrs Smith", 
     "accountNumber": "416", 
     "orderNumber": "12348", 
     "orderWeight": "120.20" 
}, 

を：

<div id=1> 
<h1>Van 1 - Total Weight = XXX </h1> 
<ul class="sortdrag"> 
    <li ng-repeat="van1 in van1" id="[[ van1.id ]]"> 
     [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]] 

    </li> 
</ul> 
</div> 

さて、私はul内のすべてのli項目の総重量。

これは静的なリストですが、リストはjQuery-uiを使用していて、liアイテムがドラッグされて各リストの間にドロップされる複数のリストがある場合は簡単です。私の質問は、ulの各liのすべての重みの値に動的にXXXを動的に更新させるにはどうすればいいのですか？

実際にはonDropイベントを使用したくはありません。これは事前に設定されたリストでは機能しないため、理想的にはulのすべてのvan1.orderWeight値から値を取得するコードを使用したいと思います。

これに最も効果的なアプローチは何ですか？そして、私がjinja2テンプレートを使用しているので、{{と}}ではなく[[と]]を使って誰かに尋ねる前に。

UPDATE：以下の答えを読んだ後に元のコントローラを修正しました[OK]を

：

function OrderListCtrl($scope, $http) { 
    $http.get('/static/angular/app/phones/van1.json').success(function(data) { 
    $scope.van1 = data; 
    // This part is easy, calcuate the sum of all weights from the JSON data 
    $scope.sumV1 = _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0); 
    }); 

    $scope.getVan1Weight = function(){ 
    // here I try and write a function to calculate the dynamic weight 
    // of a van, which will update when items get dropped in/out of the ul 
    _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0); 
    } 

そして、私のテンプレート

<div id="app" ng-controller="OrderListCtrl"> 

<div id=1> 
<h1>Van 1 - Total Weight = [[getVan1Weight()]] 
Starting Weight - [[sumV1]]</h1> 
<ul class="sortdrag"> 
    <li ng-repeat="van1 in van1" id="[[ van1.id ]]"> 
     [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]] 

    </li> 
</ul> 
</div> 

今すぐ実行を支援するunderscorejs libaryを使用してイム計算は、私は最初のデータを使用してこれを動作させるように見えるだけで、新しいオーダーが別のulからドラッグされたときには更新されません

Answer 1

Iを@ganarajのおかげで私も純粋angularjsで私のアンダースコアコードを置き換え

http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui

で発見ガイドを使用コード

$scope.getVan1Weight = function(){ 
    var sum = 0; 
    for(t=0; t < $scope.van1.length; t++) { sum += $scope.van1[t].orderWeight } 
    return sum.toFixed(2);; 
} 

私のコントローラの開始時に

は、私はまた、このよう

// Define an empty array 
$scope.van1 = []; 

は$ HTTP GETを使用すると、ブラウザウィンドウをロードする際にロードしに時間がかかるとして生成されたエラーを停止します（後で上書き取得する）空の配列を定義しました.lengthはエラーを返します。したがって、空の配列を定義すると、エラーはすべて停止します。私は配列が有効であるかどうかを調べ、いくつかのif節を入れることができましたが、私のangularjsの知識は非常に限られていますので、

Answer 2

これは、それぞれが角度で達成するためにはかなり良いです。あなたのための計算を行い、あなたのビューでその関数を補間する関数をコントローラに書く必要があります。お使いのコントローラ内部

<div id=1> 
<h1>Van 1 - Total Weight = [[getVanWeight()]] </h1> 
<ul class="sortdrag"> 
    <li ng-repeat="van1 in vans" id="[[ van1.id ]]"> 
     [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]] 

    </li> 
</ul> 
</div> 

ような何かあなたは：

$scope.getVanWeight = function(){ 
// write your logic for calculating van weight here. 

} 

Answer 3

ここ

マークアップ...私はから柱を取得するときに呼び出される

<table class="table table-condensed table-striped"> 
<thead> 
    <tr> 
     <th>Pillar Name</th> 
     <th>Weight</th> 
     <th>Metrics</th> 
     <th> Actions</th> 
    </tr> 
</thead> 
<tbody> 
    <tr data-ng-repeat="p in l.pillars"> 
     <td>{{p.name}}</td> 
     <td>{{p.weight}}</td> 
     <td>{{p.metrics.length}}</td> 
     <td> 
      <a href="" data-ng-click="vm.editPillar(p)"> 
       <i class="fa fa-pencil blue"></i> 
      </a> 
      <a href="" data-ng-click="vm.deletePillar(p, l)"> 
       <i class="fa fa-times-circle red"></i> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td><strong>Totals</strong></td> 
     <td><strong>{{l.pillars.summedWeight}}</strong></td> 
     <td></td> 
     <td></td> 
    </tr> 
</tbody> 

JS、...うまく機能するソリューションとのあなたの条件に非常によく似た何かサーバーまたはローカルキャッシュ...

function getSummedPillarWeight(pillars) { 
     var summedWeight = 0; 
     pillars.forEach(function (pillar) { 
      summedWeight = summedWeight + pillar.weight; 
     }); 
     return pillars.summedWeight = summedWeight; 
    }