5

我在我的应用程序之上使用 angularJS。

我有一个控制器的基本示例：

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 拖入新订单时更新

4

3 回答 3

4

在 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.

}
于 2012-12-14T16:31:23.313 回答
4

感谢@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 知识非常有限，所以这个解决方案对我来说最有效。

于 2012-12-21T15:51:51.440 回答
0

这里有一个与您的要求非常相似的解决方案，效果很好......

标记...

<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;
    }
于 2014-01-23T12:21:33.263 回答