Fonction Appelée Plusieurs Fois dans AngularJS Répéter la Section

Je suis en cours d'exécution dans une question où je veux lier à la sortie d'une fonction à l'intérieur d'une ng-repeat boucle. Je trouve que la fonction est appelée deux fois par point plutôt que une fois que je m'attends. Voici la ng-repeat section (avis de l'calcRowTotal() l'appel à la fin):

<tr ng-repeat="row in timesheetRows">
    <td>
        <select ng-model="row.categoryID">
            <option ng-repeat="category in categories" value="{{category.id}}">
                {{category.title}}
            </option>
        </select>
    </td>
    <td ng-repeat="day in row.dayValues">
        <input type="text" ng-model="day.hours" />
    </td>
    <td>{{calcRowTotal($index, row)}}</td>
</tr>

La calcRowTotal() fonction:

$scope.calcRowTotal = function (index, row) {
    console.log('calcRowTotal - Index: ' + index);
    var total = 0;
    for (var i = 0; i < row.dayValues.length; i++) {
        var num = parseFloat(row.dayValues[i].hours);
        if (isNaN(num)) {
            num = 0;
            //this.dayValues[i].hours = 0;
        }
        total += num;
    }
    //updateDayTotals();
    return total;
}

Un exemple de l'un des éléments itérer:

{
    categoryID: 2,
    dayValues: [
                    { day: $scope.days[0], hours: 5 },
                    { day: $scope.days[1], hours: 0 },
                    { day: $scope.days[2], hours: 3 },
                    { day: $scope.days[3], hours: 0 },
                    { day: $scope.days[4], hours: 2 },
                    { day: $scope.days[5], hours: 5 },
                    { day: $scope.days[6], hours: 8 }
    ]
}

Je vais voir la suite dans la console (deux éléments sont actuellement dans la collection je suis en boucle):

calcRowTotal - Index: 0 
calcRowTotal - Index: 1 
calcRowTotal - Index: 0 
calcRowTotal - Index: 1

Je pourrais certainement faire un "rowTotal" bien mais préfère se lier à "vivre" les données fournies par la fonction indiquée ci-dessus. J'espère que la duplication est quelque chose de simple qui me manque, donc j'apprécie tous les commentaires sur pourquoi je vois de la duplication. Comme une note de côté, car les données dans une des zones de texte les modifications que j'ai besoin de mettre à jour les totaux de ligne en tant que bien de sorte qu'il peut être j'ai besoin d'une approche différente. Intéressé dans la compréhension de cette situation particulière, mais d'abord....ne voulez certainement pas de la duplication, car il pourrait y avoir beaucoup de lignes potentiellement.

Voici un exemple: http://jsfiddle.net/dwahlin/Y7XbY/2/

C'est un doublon de stackoverflow.com/q/14973792/259038, même si elle peut ne pas avoir été immédiatement évident.
Merci Josh. Passé beaucoup de temps à chercher, mais ne voir qu'une seule. Apprécie l'info.
Ouais, ce n'est certainement pas un "supprimer ce" genre de reproduire comme il n'est pas évident qu'elles sont de la même espèce. Je voulais juste de fermer la boucle pour les futurs téléspectateurs.

OriginalL'auteur Dan Wahlin | 2013-02-20

angularjs javascript

13

C'est parce que vous êtes la liaison à une expression de fonction ici:
```
<td>{{calcRowTotal($index, row)}}</td>
```
Ce qui fait la force de cette fonction pour être réévaluées à chaque objet, à chaque digérer. Ce que vous aurez envie de faire pour éviter cela est de pré-calculer cette valeur, et la mettre dans votre tableau pour commencer.

Une façon de le faire est de mettre en place une veille sur votre tableau:
```
$scope.$watch('timesheetRows', function(rows) {
   for(var i = 0; i < value.length; i++) {
     var row = rows[i];
     row.rowTotal = $scope.calcRowTotal(row, i);
   }
}, true);
```
Puis tout ce que vous avez à faire est de lier pour que la nouvelle valeur:
```
<td>{{row.rowTotal}}</td>
```
Grâce blesh - ne le savais pas, il allait le faire, mais cela a du sens.
C'est honnêtement probablement pas un "big deal". Puisque c'est un client du côté de l'app, et il n'y a qu'un seul utilisateur, si ce n'est pas provoquer des problèmes de performances, vous pouvez le laisser si c'est plus facile pour vous de maintenir. Peu importe, j'ai quelques pseudo-code pour un correctif proposé dans ma réponse.
+1 Mais pourquoi n'utilisez-vous pas angular.forEach ici? Me semble qu'il peut avoir coupé le code vers le bas un peu. Aussi, vous devriez le mentionner, des expressions qui sera appelé au moins une fois au cours de chaque digérer et nous ne pouvons pas garantir combien de fois.
J'ai la nouvelle $regarder mentionné ci-dessus ajouté à la manette, mais je suis toujours de voir le calcRowTotal() fonction appelée 2 fois par article. Je suis en supposant basé sur ce qui a été mentionné (résumés) que c'est juste un comportement normal, et quelque chose habituer? Je suis vraiment habituée à veiller à ce que les doublons sont supprimés, mais il ne semble pas que je puisse contrôler que dans ce type de scénario?
Grand - merci encore blesh.

OriginalL'auteur Ben Lesh
1

Son totalement parce que vous êtes la liaison à une expression de fonction en tant que @Ben Lesh a suggéré.
En quelque sorte, à l'aide de $watch a aussi m'a fait de l'exécution de la même fonction deux fois.
La Solution pour s'abstenir de double exécution que nous avons utilisé est par l'utilisation de ng-init pour l'appel de fonction.
Il suffit de créer une variable init avec la fonction de retour de la valeur et de l'utilisation qui en ur de l'expression ci-dessous:
```
<tr ng-repeat="row in timesheetRows" ng-init="rowTotalValue=calcRowTotal($index, row)">
<td>
    <select ng-model="row.categoryID">
        <option ng-repeat="category in categories" value="{{category.id}}">
            {{category.title}}
        </option>
    </select>
</td>
<td ng-repeat="day in row.dayValues">
    <input type="text" ng-model="day.hours" />
</td>
<td>{{rowTotalValue}}</td>
```
Cela a fonctionné pour moi, où j'ai été en passant un seul attribut de la ligne. Pas essayé avec $index. Mais je suppose que ça devrait fonctionner.

OriginalL'auteur saurabh
0

En fait j'ai eu un problème similaire récemment.

Fini par itération sur chaque sous-objet et de liaison les totaux à un modèle. Ne devrait pas être un problème, surtout si vous êtes seulement en utilisant le total à des fins d'affichage.

par exemple.
```
//Reset to Zero
$scope.rowTotal = 0;

jquery.each($scope.row, function(key, value) {
 $scope.totalRow += value.hours;
});
```
et itérer sur chaque ligne.

De nombreux AngularJS projets ne pas utiliser jQuery, mais ils peuvent utiliser la fonctionnellement similaires angular.forEach.

OriginalL'auteur Christopher Marshall

Vous devez vous connecter pour publier un commentaire.