AngularJS列表的動態總和

Question

我正在使用我的應用程序的angularJS ontop。

我有一個控制器的一個基本的例子：}

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" 
}, 

我的HTML看起來像這樣：

<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和我有多個列表裏的項目被拖放到每個列表之間。我的問題是，我怎麼能夠將XXX動態更新爲ul中每個li中所有權重的值，或者更多的問題甚至可以完成？

我真的不想使用onDrop事件，因爲這在預填充列表中不起作用，所以理想情況下我想使用從ul中的所有van1.orderWeight值中獲取其值的代碼。

任何建議最好的方法來處理這將非常感激！之前有人問我使用[[和]]而不是{{和}}，因爲我正在使用jinja2模板。

UPDATE：

好的閱讀修改了原來的控制器下面的答案後：

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

感謝@ganaraj我曾經在

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

找到了導遊，我也換成我下劃線的代碼用純angularjs代碼

$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

在Angular中每個人都可以實現這一點。你必須在你的控制器中編寫一個函數來爲你進行計算並在你的視圖中插入該函數。喜歡的東西

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