Incrémenter une variable dans le modèle AngularJS

Je vais commencer en disant que je suis très nouveau à AngularJS, donc pardonnez-moi si mon état d'esprit est loin de la base. Je suis en train d'écrire un très simple en une seule page les rapports d'application en utilisant AngularJS, la viande et les pommes de terre est bien sûr à l'aide de l'angle de système de template pour générer les rapports eux-mêmes. J'ai de nombreux de nombreux rapports que je suis la conversion d'un Jinja-syntaxe et je vais avoir un moment difficile de la réplication de tout type de compteur ou de l'exécution de la totalisation de la fonctionnalité.

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; qui je suis alors en mesure d'accéder à l'intérieur du modèle sans problème. Ce que je n'arrive pas à comprendre est comment faire pour incrémenter cette total dans un ng-repeat élément. J'imagine que cela ressemblerait -

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

De toute évidence, cela ne fonctionne pas, ni fait quelque chose comme {{ total + foo.baz}}merci d'avance pour tous les conseils.

source d'informationauteur HurnsMobile

  1. 31

    Si tout ce que vous voulez, c'est un contre (comme par votre premier exemple de code), jetez un oeil à $index qui contient le courant (0) index dans le contenant ngRepeat. Et puis il suffit d'afficher 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 voulez un total d'un domaine particulier dans votre élément répété, dire le 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 l'amélioration de la réutilisabilité de l'un générique total fonction de filtre:

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

    Qui serait utilisé comme:

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

    J'avais besoin total en cours d'exécution plutôt que la simple total, j'ai donc ajouté sur ce @TimStewart gauche. 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;
    };
});

    De l'utiliser dans la colonne que vous venez de faire:

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

    Je ne suis pas sûr que je comprends tout à fait la question, mais juste besoin d'afficher le nombre total dans l'objet que vous avez à parcourir? Juste mettre $scope.total à la longueur de votre tableau (bar dans l'exemple ci-dessus). Donc, $scope.total = $scope.bar.length;

    Si vous êtes voulant que le total de tous les foo.baz propriétés, vous avez juste besoin de calculer que, dans votre contrôleur.

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