Augmenter une variable dans le modèle AngularJS

Je vais préciser cela en disant que je suis très nouveau chez AngularJS, pardonne-moi si mon état d'esprit est lointain. J'écris une application de rapport de page unique très simple à l'aide d'AngularJS, la viande et les pommes de terre utilisent bien sûr le système de modélisation angulaire pour générer les rapports eux-mêmes. J'ai beaucoup de rapports que je convertis sur une syntaxe de type Jinja et j'ai de la difficulté à reproduire tout type de compteur ou de fonctionnement de la fonctionnalité de tabulation.

Ex.

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

Dans mon contrôleur, j'ai défini une variable comme $scope.total = 0; Que je peux alors accéder à l'intérieur du modèle sans problème. Ce que je ne peux pas comprendre, c'est comment incrémenter ce total partir d'un élément ng-repeat . J'imagine que cela ressemblerait à quelque chose comme –

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

Cela évidemment ne fonctionne pas, ni quelque chose comme {{ total + foo.baz}} , merci d'avance pour tout conseil.

Si tout ce que vous voulez est un compteur (selon votre premier exemple de code), regardez l'index $ qui contient l'index actuel (0 basé) contenant ngRepeat contenant. Ensuite, affichez simplement la longueur du tableau pour le total.

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

Si vous désirez un total d'un champ particulier dans vos articles répétés, par exemple prix, vous pouvez le faire avec un filtre, comme suit.

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

Et la fonction de filtre:

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

Ou, pour une réutilisabilité améliorée , une fonction générique de filtre 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; } });

Ce qui serait utilisé comme:

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

J'avais besoin d'exécuter le total plutôt que le total, donc j'ai ajouté ce que @TimStewart a laissé. Voici le code:

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

Pour l'utiliser dans la colonne, il suffit de faire:

 <div>Total price: {{items | runningTotal:'price':$index}}</div>

Je ne suis pas sûr de comprendre totalement la question, mais j'ai juste besoin d'afficher le nombre total dans l'objet sur lequel vous faites l'itinéraire Il suffit de régler $scope.total sur la longueur de votre tableau ( bar dans votre exemple ci-dessus). Donc, $scope.total = $scope.bar.length;

Si vous désirez le total de toutes les propriétés foo.baz , il vous suffit de calculer cela dans votre contrôleur.

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