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 に答える