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,我有多个列表,其中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, '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库来帮助执行计算,但我似乎只能使用初始数据来使用它,而不是在从另一个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 知识非常有限，所以这个解决方案最适合我。