how to update a list inside ng-repeat using angular?

Question

i lave an ionic list

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item.name}}!
  </ion-item>
</ion-list>

then, in the controller i have a event:

$scope.items = someData();
itemsRef.on('event', function (response) {
    console.log(response); // this is an object containing he "name" property
});

i would like append the response as a ion-item , without inserting html, but somehow adding the response to the items

edit:

I've tried: $scope.items.push(response); but weirdly enough i get Uncaught TypeError: undefined is not a function

edit: it looks like one doesn't just $scope.items.push(response); , but $scope.items[next_key_here] = response;

see jsfiddle

Answer 1

If itemRef is an Angular service, all you need is to add the object to the items array:

$scope.items.push( response );

If itemRef uses some non-Angular asynchronous service to get its response, you will need to tell Angular that things have updated:

$scope.$apply( function() {
    $scope.items.push( response );
});

If you are having problems with $scope, it's always a good idea to use a $scope variable with a dot in, for example use $scope.data.items rather than $scope.items.

See http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html for a great discussion on why.

Answer 2

I've tried: $scope.items.push(response); but weirdly enough i get Uncaught TypeError: undefined is not a function

That happens because $scope.items isn't an Array object when you access it before it hasn't been populated with a value yet. Try doing something like this, which should work:

if ($scope.items && $scope.items instanceof Array) {
  $scope.items.push(response);
}