Приращение переменной A в шаблоне AngularJS

Я предваряю это, сказав, что я очень новичок в AngularJS, поэтому простите меня, если мое мышление далеко от базы. Я пишу очень простое приложение для отправки одной страницы с помощью AngularJS, мясо и картофель, конечно, используют систему шаблонов angular для создания самих отчетов. У меня есть много сообщений, которые я перехожу из синтаксиса, подобного 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}}, заранее спасибо за любые советы.

Ответ 1

Если все, что вам нужно, это счетчик (в соответствии с вашим первым примером кода), посмотрите индекс $index, который содержит текущий индекс (0 на основе) в содержащем ngRepeat. А затем просто отобразите длину массива для общей суммы.

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

Ответ 2

Мне нужно было выполнить общее количество, а не просто, поэтому я добавил, что осталось @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>

Ответ 3

Я не уверен, что полностью понимаю вопрос, но мне просто нужно отобразить общее число в объекте, который вы повторяете? Просто установите $scope.total в длину вашего массива (bar в приведенном выше примере). Итак, $scope.total = $scope.bar.length;

Если вы хотите получить общее количество всех свойств foo.baz, вам просто нужно вычислить это в вашем контроллере.

$scope.total = 0;
angular.forEach($scope.bar, function(foo) {
    $scope.total += foo.baz;
});