Angular ng-repeat not updating array

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>

What is the intended update made to the alarmlist's values? Are you meaning to decrement 1 from the alarm every second, like a countdown? — Seb Cooper
– Seb Cooper, Commented Jan 2, 2017 at 8:10

Satpal · Accepted Answer · 2017-01-02 08:50:04Z

3

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.

edited Jan 2, 2017 at 8:50

answered Jan 2, 2017 at 8:04

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ghazanfar Khan · Accepted Answer · 2017-01-02 08:04:56Z

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

Harminder Singh · Accepted Answer · 2017-01-02 08:41:02Z

1

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

answered Jan 2, 2017 at 8:41

Harminder Singh

312 bronze badges

Comments

Seb Cooper · Accepted Answer · 2017-01-02 08:42:20Z

0

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.

answered Jan 2, 2017 at 8:42

Seb Cooper

5842 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat not updating array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related