Angular ng-repeat不更新数组

Question

I have an array as follows:

[7500, 15000, 21300, 3600]

This array is printed in the view using ng-repeat . But my problem is, I'm updating this array every second using setInterval , it is fired, and works on controller but updated value is not shown in view. My code is given below:

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

You should use $interval instead of setInterval which will internally call $scope.apply() to update bindings.

 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);
 }

Note: Intervals created by this service must be explicitly destroyed when you are finished with them.

Answer 2

Angular's wrapper for window.setInterval. The fn function is executed every delay milliseconds.

The return value of registering an interval function is a promise. This promise will be notified upon each tick of the interval, and will be resolved after count iterations, or run indefinitely if count is not defined. The value of the notification will be the number of iterations that have run. To cancel an interval, call $interval.cancel(promise).

In tests you can use $interval.flush(millis) to move forward by millis milliseconds and trigger any functions scheduled to run in that time.

Note: Intervals created by this service must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment. See the example below for more details on how and when to do this.

You have to use $interval

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

Answer 3

In your case, Angular doesn't get notified that the value has been changed and the digest cycle doesn't run. Some angular directives/services ( ng-click, $timeout, $interval, etc. ) automatically trigger the digest cycle. So, either use $interval instead of setInterval or manually trigger the digest cycle by wrapping your for loop inside $scope.$apply(() => { /* your code here */ });

Answer 4

There appears to be some logical flaws in your code. Try the following:

<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>

I assume you need the $interval wrapper too in the case of angular.