Angulaire - obtenir la longueur des données sans utiliser ng-repeat

Question

Je travaille avec angulaire et je dois pouvoir afficher une longueur de tableau sans utiliser ng-repeat.

Voici le scénario:

J'ai default.json:

{
 { ...
   "data":
      [{
        "name":"Test",
        "errors":
          [
           {"id": 1,"level": 2,"details": {...}},
           {"id": 3,"level": 1},
           {"id": 5,"level": 1},
           {"id": 5,"level": 1},
           ....
          ],
        },
        {
         "name":"Test",
         "errors":
          [
           {"id": 1,"level": 2,"details": {...}},
           {"id": 5,"level": 1},
           ....
          ],
        }
      ],
    ....
  }
}

Alors j'ai créé myData à partir du contrôleur, afin que je puisse faire quelque chose comme ng-repeat="data in myData" et que je puisse l'utiliser correctement.

Maintenant, voici la question:

J'ai besoin d'avoir un récapitulatif de toutes les erreurs, une somme de toutes les erreurs dans les objets.

J'ai essayé de faire quelque chose comme ça:

<span ng-repeat="data in myData">
<i ng-repeat="error in data.errors">{{error.length}}</i>
</span>

Et rien n'a été imprimé. J'ai donc essayé:

<span ng-repeat="data in myData">
<i>{{data.errors.length}}</i>
</span>

Et le résultat a été:

4 2 0 0 0 0 0

Et cela a du sens, car mon premier objet a 4 erreurs, mon second 2 et ainsi de suite ...

Mais ce que j'aimerais voir, c'est seulement: 6 , car il y a 6 erreurs au total.

Comment puis-je obtenir une seule valeur qui résume toutes les erreurs de tous les objets que j'ai sans avoir à utiliser ng-repeat (je pense que je n'en ai pas besoin là)

J'espère que cette question est suffisamment claire, merci pour votre aide.

javascript angularjs angularjs-ng-repeat ng-repeat

0

Nick 8 mars 2016 à 15:22

Answer 1

Une solution possible consiste à utiliser réduire , vous pouvez donc utiliser la réduction comme ceci

var result = array.reduce((prev, curr) => prev + curr);

Si le tableau est [4,2,0] le result ce sera 6

Donc une solution possible sera sur le balisage appeler une fonction de portée

{{arraySum(data.errors.length)}}

Et la fonction sera

$scope.arraySum= function(array) {
    return array.reduce((prev, curr) => prev + curr);
}

MODIFIER pour cette modification, nous utiliserons la fonction carte

Balisage

{{totalErrors()}}

Code

$scope.totalErrors = function(){
    if ($scope.myData)
        return $scope.myData.data.map(function(o){ return o.errors.length})
                                 .reduce((prev,curr) => {return prev + curr})
}

J'ai créé un plongeur à partir de ce que je comprends de vos données, vous pouvez le voir fonctionner ici

Ici est un plunker qui simule le retard d'une demande ajax en utilisant $ timeout. Il utilise ng-cloak sur le balisage pour empêcher l'affichage des données brutes.

1

Jose Rocha 8 mars 2016 à 13:39

Answer 2

Vous devez faire de cette façon dans votre contrôleur

 var sum=0;
 for(var i=0;i<$scope.MyData.length;i++)
 {
   var error=[];
   error=$scope.MyData[i].errors;
   sum=sum+error.length;

 }
 alert(sum+'');

1

Hassan Tariq 8 mars 2016 à 12:32

Answer 3

Utiliser ce code dans le contrôleur (mis à jour pour la promesse)

function countErrors(myData) {
  $scope.totalErrors = myData
    .map(function(data) { 
      return data.errors.length; })
    .reduce(function(acc, errorsLenght){
      return acc += errorsLenght }, 0)
}
$scope.myData.$promise.then(countErrors)

1

ciekawy 8 mars 2016 à 12:58

Angulaire - obtenir la longueur des données sans utiliser ng-repeat

3 réponses

Questions connexes

De nouvelles questions

javascript