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