Question

我有一个数组如下：

[7500, 15000, 21300, 3600]

使用ng-repeat在视图中打印此数组。但我的问题是，我每秒使用setInterval更新此数组，它被触发，并在控制器上工作但更新的值未显示在视图中。我的代码如下：

的JavaScript

 angular
    .module('controllers')
    .controller('DashCtrl', DashCtrl);

 function DashCtrl($scope, $window) {

     var dash = this;
     dash.alarmList = JSON.parse() ; // [7500, 15000, 21300, 3600]

     dash.updateClock = function() {
        for(var key in dash.alarmList) {
            dash.alarmList[key] --;
        }
     }

     setInterval( dash.updateClock, 1000);
 }

HTML

 <div class="list">

  <a class="item item-icon-left" ng-repeat="alarm in dash.alarmList">
    <i class="icon ion-person-stalker"></i>
    {{alarm}}
    <span class="badge badge-assertive">0</span>
  </a>

</div>

Answer 1

您应该使用$interval代替setInterval，$scope.apply()会在内部调用angular .module('controllers') .controller('DashCtrl', DashCtrl); function DashCtrl($scope, $window, $interval) { var dash = this; dash.alarmList = JSON.parse() ; // [7500, 15000, 21300, 3600] dash.updateClock = function() { for(var key in dash.alarmList) { dash.alarmList[key] --; } } $interval(dash.updateClock, 1000); }来更新绑定。

{
"rules": {
  "student": {
    "$uid": {
      ".write": "auth != null && auth.uid == $uid",
      ".read": "auth != null && auth.uid == $uid"
      }
    }
  }
}

注意：完成后，必须明确销毁此服务创建的间隔。

Answer 2

Angular的window.setInterval包装器。执行fn功能   每延迟几毫秒。

注册间隔函数的返回值是一个承诺。   这个承诺将在间隔的每个滴答时通知，并且会   计数迭代后解析，或者如果计数是无限期运行   没有定义的。通知的值将是   已经运行的迭代。要取消间隔，请致电   $ interval.cancel（许诺）。

在测试中，您可以使用$ interval.flush（millis）向前移动毫秒   毫秒并触发计划在那段时间内运行的任何函数。

注意：必须明确销毁此服务创建的间隔   当你完成它们。特别是他们不是   当控制器的范围或指令时自动销毁   元素被破坏了。你应该考虑到这一点   确保始终在适当的时候取消间隔。看到   以下示例了解有关如何以及何时执行此操作的更多详细信息。

你必须使用$ interval

$interval(function(){dash.updateClock}, 1000);

Answer 3

在您的情况下，Angular不会收到通知，表示值已更改且摘要周期未运行。一些角度指令/服务（ng-click, $timeout, $interval, etc.）会自动触发摘要周期。因此，要么使用$ interval而不是setInterval，要么通过将for循环包装在$scope.$apply(() => { /* your code here */ });

中手动触发摘要周期

Answer 4

您的代码中似乎存在一些逻辑缺陷。请尝试以下方法：

<script>function DashCtrl() {

     var dash = this;
     var alarmlist = {
        0: 7500,
        1: 1500,
        2: 21300,
        3: 3600
      };

      dash.alarmList = alarmlist;


     dash.updateClock = function() {
        for(var i in dash.alarmList) {
            dash.alarmList[i] -= 1;
        }
        console.log(dash.alarmList);
     }

     setInterval( dash.updateClock, 1000);
 }
 DashCtrl();
 </script>

我认为在角度的情况下你也需要$ interval包装器。

Angular ng-repeat不更新数组

4 个答案: