jquery-ui – AngularJS动态列表总和

我正在使用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 - @R_979_10586@l 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项在每个列表之间被拖放.我的问题是,如何让XXX动态更新ul中每个li中所有权重的值,或者更多的问题甚至可以做到这一点？

我真的不想使用onDrop事件,因为这对预先填充的列表不起作用,所以理想情况下我想使用从ul中所有van1.orderWeight值获取其值的代码.

任何关于最佳方法的建议都将非常感谢！之前有人问我使用[[和]]而不是{{和}},因为我使用的是jinja2模板.

更新：

好了,看完下面的答案后,将原控制器修改为：

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,0);
    }

还有我的模板

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

<div id=1>
<h1>Van 1 - @R_979_10586@l 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库来帮助执行计算,但我似乎只能使用初始数据来使用它,而不是在从另一个ul拖入新订单时更新

<div id=1>
<h1>Van 1 - @R_979_10586@l 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.

}