Angularjs ng-repeat with new element

Question

i'm trying make some test app in anguar.js, but faced with the problem. My js file contain:

live = angular.module('live',[]);
live.controller('printCtrl', function() {
        this.test = [];
        var thizzz = this;

        this.getTest = function() {
            return this.test;
        };

        setInterval(function() {
            thizzz.test.push(Date.now());
        }, 1000);
   }
);

My html file contain:

<div class="content" ng-app="live">
    <div ng-controller="printCtrl as print">
        <div ng-repeat="t in print.getTest()">
             {{t}}
        </div>
    </div>
</div>

But i don't see anything. Why?

------------- UPDATE ---------------

I'm change my js file like this:

live = angular.module('live',[]);
live.controller('printCtrl', function() {
        this.test = [1, 2, 3];
        var thizzz = this;

        this.getTest = function() {
            console.log('INSIDE');
            return this.test;
        };

        setInterval(function() {
            thizzz.test.push(Date.now());
        }, 1000);
   }
);

and html without any changes.

I don't see anythink in HTML files, but i see in console, how angular call 2 times getTest function.

can you see the value in test array? it seems empty to me. Please be sure you are actually executing the code pushing into test array. — Sefa
– Sefa, Commented Jul 22, 2014 at 11:10
if i'm add console.log(thizzz.test) inside setInterval function, i see new elements add into it. But angular don't want reflect into HTML — user2024300
– user2024300, Commented Jul 22, 2014 at 11:22
Code seems fine to me. Can you add one default object into the array? So we can detect where the problem is. — Sefa
– Sefa, Commented Jul 22, 2014 at 11:23

Raghavendra · Accepted Answer · 2014-07-22 11:30:33Z

2

If we use setInterval or setTimeout in an AngularJS application we also need to use $scope.$apply() to ensure that any changes to the scope will be reflected elsewhere (i.e. data-bound in a view).

AngularJS provides a handy wrapper for this: $timeout() - it does the $apply() call for us so we don't have to.

$interval(function () {
    thizzz.test.push(Date.now());
}, 1000);

see demo: http://jsfiddle.net/VPVF6/

edited Jul 22, 2014 at 11:30

answered Jul 22, 2014 at 11:25

Raghavendra

5,4074 gold badges39 silver badges53 bronze badges

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

Comments

V31 · Accepted Answer · 2014-07-22 11:36:54Z

1

You need to init a variable first in order to get the list and then use that scope variable

<div class="content" ng-app="live">
    <div ng-controller="printCtrl as print" ng-init="printList=getTest()">
        <div ng-repeat="t in printList">
             {{t}}
        </div>
    </div>
</div>

The controller is required to have $interval service so that no $apply is required

$interval(function() {
    $scope.test.push(Date.now());
 }, 1000);

edited Jul 22, 2014 at 11:36

answered Jul 22, 2014 at 11:15

V31

7,6643 gold badges28 silver badges44 bronze badges

Comments

sylwester · Accepted Answer · 2014-07-22 11:23:58Z

0

please see here : http://jsbin.com/munal/2/edit

<div ng-controller="printCtrl" ng-init="printList=getTest()">

    <div ng-repeat="t in test">
         {{t}}
    </div>
</div>

  </div>

JS:

app.controller('printCtrl', function($scope){

        $scope.test = [];


        this.getTest = function() {
            return this.test;
        };

        setInterval(function() {
           $scope.test.push(Date.now());
          $scope.$apply();
        }, 1000);
});

answered Jul 22, 2014 at 11:23

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

7 Comments

user2024300 Over a year ago

Yeah, your variant work fine, but i'm don't understand why my code doesn't work. I think angular autodetect new element inside array, but without apply i don't see any changes...

sylwester Over a year ago

@user2024300 if you use setInterval you need call $scope.$apply() because otherwise angular don't now about changes. You can use $interval like in Raghav answer and in that case you don't have to call $scope.$apply(). I hope that will help

user2024300 Over a year ago

what if i get new element using WebSocket? I need $scope.$apply to?

sylwester Over a year ago

depends how do you call WebSocket

user2024300 Over a year ago

socket.on('message', function() {$scope.test.push(message);});

|

Collectives™ on Stack Overflow

Angularjs ng-repeat with new element

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related