Угловая нг-повторить не обновляя массив

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

Примечание: Интервалы, созданные этой службой, должны быть явно уничтожены, когда вы закончите с ними.

Answer 2

обертка для угловых 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 в случае углового.