Question

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">        </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="personCtrl">{{count()}}</div>
    <script>

    var app = angular.module('myApp', []);

    app.controller('personCtrl', function($scope) {
        $scope.listarray=[1,2,3,4];
        var count=0    

        $scope.count = function() {
            angular.forEach($scope.listarray,function(value,key){
                count=count+1;
            });
            return count;
        }
     });
   </script>
</body>
</html>

上面代码显示的答案是88。当var count位于count内时，功能显示为4，但在count功能之外显示88。为什么会这样？

Answer 1

行为的原因是您已将count()函数附加到$scope并在绑定表达式中使用它。在AngularJS中，用于计算表达式和呈现视图的$digest周期可以多次运行。

在伪代码中，$digest周期看起来像这样：

对于每个$scope属性
检查$scope属性是否已更改（例如，通过评估绑定表达式）
如果更改，请调用更改处理程序（可能会更新更多范围变量），否则请继续
对所有范围重复
重复循环1-4直到$scope属性stabalise

Answer 2

为什么使用功能或每个循环，您只需使用长度属性 $ scope.listarray.length; 试试这个：

<head>
<script src=        "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">        </script>
    </head>

  <body>

 <div ng-app="myApp" ng-controller="personCtrl">
 {{count}}

  </div>

 <script>

    var app = angular.module('myApp', []);

  app.controller('personCtrl', function($scope) {
   $scope.listarray=[1,2,3,4];

   $scope.count =  $scope.listarray.length;    
     });
   </script>

    </body>
   </html>

Answer 3

你创造了无限循环。因为每次值发生变化时都会调用函数count（）。例如，您可以检查该值是否已更改

 $scope.count = function() {
        if(count !== 0){return count;}
        angular.forEach($scope.listarray,function(value,key){
            console.log('value', value);
            count=count+1;
        });
        return count;
    }

伯爵的答案是88：为什么？

3 个答案: