Angular - 不使用 ng-repeat 获取数据长度

Question

我正在使用 angular，我需要能够显示数组长度但不使用 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

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

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 is a plunker that simulates the delay of an ajax request using $timeout. It uses ng-cloak 标记以防止显示原始数据。

Angular - 不使用 ng-repeat 获取数据长度

Angular - get data length without using ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat