在 AngularJS 模板中增加一个变量 [英] Increment A Variable In AngularJS Template

问题描述

我会在开头说我对 AngularJS 很陌生，所以如果我的心态偏离基础，请原谅我.我正在使用 AngularJS 编写一个非常简单的单页报告应用程序，肉和土豆当然是使用 angular 模板系统来生成报告本身.我有很多报告说我正在从类似 Jinja 的语法转换过来，而且我很难复制任何类型的计数器或运行制表功能.

例如

{% set count = 1 %}{% for i in p %}{{ 数数 }}{% 设置计数 = 计数 + 1 %}{% 结束为 %}

在我的控制器中，我定义了一个变量，如 $scope.total = 0; 然后我可以毫无问题地访问模板内部.我不太清楚的是如何从 ng-repeat 元素中增加这个 total .我想这看起来像 -

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

这显然行不通，{{ total + foo.baz}} 之类的东西也行不通，在此先感谢您的建议.

解决方案

如果你想要的只是一个计数器(按照你的第一个代码示例)，看看包含当前(基于 0)包含 ngRepeat 的索引.然后只显示总数的数组长度.

<li ng-repeat="项目中的项目">商品编号:{{$index + 1}}
<div>{{items.length}} 项</div>

如果您想要重复商品中特定字段的总数，例如价格，您可以使用过滤器来实现，如下所示.

<li ng-repeat="项目中的项目">价格:{{item.price}}
<div>总价:{{items |总价}}</div>

和过滤器功能:

app.filter("totalPrice", function() {返回函数(项目){var 总计 = 0, i = 0;for (i = 0; i 

或者，为了提高可重用性，一个通用的total过滤器函数:

 app.filter("total", function() {返回函数(项目，字段){var 总计 = 0, i = 0;for (i = 0; i < items.length; i++) total += items[i][field];总回报；}});

会像这样使用:

总价:{{items |总计:'价格'}}

I'll preface this by saying I am very new to AngularJS so forgive me if my mindset is far off base. I am writing a very simple single page reporting app using AngularJS, the meat and potatoes is of course using the angular templating system to generate the reports themselves. I have many many reports that I am converting over from a Jinja-like syntax and I'm having a hard time replicating any kind of counter or running tabulation functionality.

Ex.

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

In my controller I have defined a variable like $scope.total = 0; which I am then able to access inside of the template without issue. What I can't quite figure out is how to increment this total from within an ng-repeat element. I would imagine this would look something like -

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

This obviously doesn't work, nor does something like {{ total + foo.baz}}, thanks in advance for any advice.

解决方案

If all you want is a counter (as per your first code example), take a look at $index which contains the current (0 based) index within the containing ngRepeat. And then just display the array length for the total.

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

If you want a total of a particular field in your repeated items, say price, you could do this with a filter, as follows.

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

And the filter function:

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

Or, for improved reusability, a generic total filter function:

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

Which would be used like:

<div>Total price: {{items | total:'price'}}</div>

这篇关于在 AngularJS 模板中增加一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！