How to update my $scope after adding new elements?

Question

I have a problem with my controller. I use ionic (angular) and js-data. when I add a new item via addItem() I will only when see it if I reload the page via F5.

Here is my code:

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
    };
})

what I have to do to see the new element withous first pressing F5 in my browser window?

You have to `push` the new item into your collection: `$scope.items.push($scope.item)` — DRobinson, Apr 22 '15 at 19:11

score 1 · Accepted Answer · answered Apr 22 '15 at 19:13

you are creating an item and updating database. but you are not updating $scope.items. so push item to $scope.items or you can call this code just after creating. it will update you $scope.items

foo.findAll().then(function (items) {
                $scope.items = items;
            });

use this code:

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
        $scope.items.push({ name: $scope.item.name });
    };
})

or

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
           foo.findAll().then(function (items) {
                $scope.items = items;
            });
    };
})

The latter solution should be DRYed up by creating a `function fetchItems()`, or similar to avoid having the duplicated code for making-and-handling API calls. — DRobinson, Apr 22 '15 at 19:16

score 0 · Answer 2 · answered Apr 22 '15 at 19:15

You are not storing the created item anywhere in your contoller. I presume that foo.create returns an item, am I correct? If that is the case, perhaps something like this could work:

$scope.addItem = function () {
    var item = foo.create({name: $scope.item.name});
    // this assumes that $scope.items is an array
    $scope.items.push(item);
};

score 0 · Answer 3 · answered Oct 30 '15 at 07:02

If you're using js-data-angular, then you could also do:

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
  $ionicPlatform.ready(function() {
    // retrieve that initial list of items
    foo.findAll();

    // $scope.items will be kept up-to-date with
    // the foo items in the store
    foo.bindAll(null, $scope, 'items');
  });

  $scope.item = {};
  $scope.addItem = function () {
    // thanks to the bindAll above, the
    // created item will be rendered
    // automatically
    foo.create({ name: $scope.item.name });
  };
})

score -1 · Answer 4 · answered Apr 22 '15 at 19:12

-1

This might solve the problem:

 foo.findAll().then(function (items) {
            $scope.items = items;
            $scope.$apply();
        });

answered Apr 22 '15 at 19:12

szinter

283
1
8

2

Don't do the `$apply`, the `then` function should already be in a digest cycle. – DRobinson Apr 22 '15 at 19:15

How to update my $scope after adding new elements?

4 Answers4