Question

我正在处理角度，我需要能够显示数组长度但不使用ng-repeat。

这里的情景：

我有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},
           ....
          ],
        }
      ],
    ....
  }
}

然后我从控制器创建了myData，这样我可以做ng-repeat="data in myData"这样的事情，我可以正确使用它。

现在，问题在于：

我需要回顾一下所有错误，即对象中所有错误的总和。

我试着这样做：

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

并且没有打印任何内容。所以我试过了：

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

结果是：

4 2 0 0 0 0 0

这是有道理的，因为我的第一个对象是4个错误，我的第二个对象是2等等......

但我希望看到的只是： 6 ，因为总共有6个错误。

如何只获得一个值，该值可以汇总我所有对象的所有错误，而无需使用ng-repeat（我认为我不需要它）

希望这个问题很清楚，谢谢你的帮助。

Answer 1

你应该在控制器中这样做

 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+'');

Answer 2

在控制器中使用此代码（为承诺更新）

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)

Answer 3

可能的解决方案是使用reduce，因此您可以像这样使用reduce

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

如果数组为[4,2,0] result，则为6

所以可能的解决方案是在标记上调用范围中的函数

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

，功能将是

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

修改对于此编辑，我们将使用函数map

标记

{{totalErrors()}}

码

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

我根据我的理解创建了一个plunker，您可以看到它的数据 here

Here是一个使用$ timeout模拟ajax请求延迟的plunker。它在标记上使用ng-cloak来防止显示原始数据。

Angular - 在不使用ng-repeat的情况下获取数据长度

3 个答案: