13

私はAngularJSに非常に慣れていないので、私の考え方がベースからかけ離れている場合はご容赦ください。私は AngularJS を使用して非常にシンプルな単一ページのレポート アプリを作成しています。肉とジャガイモはもちろん角度テンプレート システムを使用してレポート自体を生成しています。Jinja のような構文から変換しているという報告がたくさんありますが、あらゆる種類のカウンターを複製したり、集計機能を実行したりするのに苦労しています。

元。

{% set count = 1 %}
{% for i in p %}
  {{ count }}
  {% set count = count + 1 %}
{% endfor %}

私のコントローラーでは$scope.total = 0;、問題なくテンプレート内にアクセスできるような変数を定義しました。私がよく理解できないのは、要素total内からこれをインクリメントする方法です。ng-repeatこれは次のようになると思います-

<ul>
    <li ng-repeat="foo in bar">
        {{ foo.baz }} - {{ total = total + foo.baz }}
    </li>
</ul>
<div> {{ total }} </div>

これは明らかに機能しません。また、次のようなこともできません{{ total + foo.baz}}。アドバイスをよろしくお願いします。

4

3 に答える 3

33

(最初のコード例のように)カウンターだけが必要な場合は、含まれている ngRepeat 内の現在の (0 ベースの) インデックスを含む $index を見てください。そして、合計の配列の長さを表示するだけです。

<ul>
    <li ng-repeat="item in items">
        Item number: {{$index + 1}}
    </li>
</ul>
<div>{{items.length}} Items</div>

繰り返されるアイテムの特定のフィールド (価格など) の合計が必要な場合は、次のようにフィルターを使用してこれを行うことができます。

<ul>
    <li ng-repeat="item in items">
        Price: {{item.price}}
    </li>
</ul>
<div>Total Price: {{items | totalPrice}}</div>

そしてフィルター機能：

app.filter("totalPrice", function() {
  return function(items) {
    var total = 0, i = 0;
    for (i = 0; i < items.length; i++) total += items[i].price;
    return total;
  }
});

または、再利用性を向上させるために、一般的な合計フィルター関数:

  app.filter("total", function() {
    return function(items, field) {
      var total = 0, i = 0;
      for (i = 0; i < items.length; i++) total += items[i][field];
      return total;
    }
  });

次のように使用されます。

<div>Total price: {{items | total:'price'}}</div>
于 2012-10-22T12:28:47.147 に答える
5

単純な合計ではなく実行中の合計が必要だったので、@TimStewart が残したものを追加しました。ここにコード：

app.filter("runningTotal", function () {
    return function(items, field, index) {
        var total = 0, i = 0;
        for (i = 0; i < index+1; i++) {
            total += items[i][field];
        }
        return total;
    };
});

列で使用するには、次のようにします。

<div>Total price: {{items | runningTotal:'price':$index}}</div>
于 2014-06-24T20:42:45.363 に答える
0

質問を完全に理解しているかどうかはわかりませんが、繰り返し処理しているオブジェクトの合計数を表示する必要があるだけですか? $scope.total配列の長さに設定するだけです（bar上記の例では）。そう、$scope.total = $scope.bar.length;

すべてのプロパティの合計がfoo.baz必要な場合は、コントローラーでそれを計算するだけです。

$scope.total = 0;
angular.forEach($scope.bar, function(foo) {
    $scope.total += foo.baz;
});
于 2012-10-19T23:08:16.480 に答える