AngularJS 在每个循环中更新页面上的范围值

Question

在此示例中，我需要做什么才能在循环的每次迭代中更新 UI 中的范围变量？

JS

var q = 100;
while ( q > 0 ) {
  $scope.someThing = q;
  q--;
}

HTML

{{someThing}}

我以为我正在处理以下内容，但它不起作用。我看到的只是最终结果，而不是每次迭代。

var q = 1000;
while ( q > 0 ) {
    $scope.$apply(function () {
      $scope.someThing = q;
      q--;
    });
}

--编辑--

感谢您对 interval/timeout 的建议。我想我明白为什么现在需要这个了。但我希望我可以 "callback" 以某种方式重新绘制，以便循环仍然尽可能快地运行。有没有简单的方法可以实现？

Answer 1

您可以尝试使用 $timeout 而不是 while 循环来延迟函数。

像这样：

 $timeout(function(){
    $scope.something = q;
    q--;
  }, 1000);

Answer 2

~~那个循环执行得非常快——你不会看到它计数。~~感谢@PSL 的更好解释：基本上 JavaScript 循环同步运行。并且 Angular 依赖于摘要周期来更新基于范围属性的视图。在这种情况下循环运行然后摘要循环发生。相反，您需要让摘要循环在每次计数后发生，以便看到渐进式更新。

如果你想让它工作，请使用 $timeout：

var q = 100;

function subtractQ() {
    q--;
    $scope.someThing = q;
}

$timeout(subtractQ, 1000);

或$interval

$interval(function() {
    q--;
    $scope.someThing = q;
}, 1000);

Answer 3

这是因为您需要在每次迭代之间设置一个超时异步。为此，我会使用 $interval：

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

testApp.controller('testCtrl', ['$scope', '$interval', function($scope, $interval) {

  var q = 100;
  var interval = $interval(decreaseQ, 50);
  
  function decreaseQ() {
    $scope.someThing = q;
    
    if(q == 0) $interval.cancel(interval);
    else q--;
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testApp" ng-controller="testCtrl">
  {{someThing}}
</div>

AngularJS 在每个循环中更新页面上的范围值

AngularJS update scope value on page on every loop

angularjs