How can I refresh a view in Ionic and AngularJS to display the updated data

Question

I have made a simple app using Ionic and AngularJS which takes values from one view, stores data into SQLite database and then displays the added values in another view. I have made use of ion-tabs for displaying the views. But when I switch into another view after adding the items, I am unable to see the added value. I need to close the app and launch it again to see the updated list.

Is there any way that I can reload the view when I switch into it?

HTML

  <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon="ion-home" ui-sref=".home">
      <ion-nav-view name="tab-home">
      </ion-nav-view>
    </ion-tab >
    <ion-tab title="Add Item" icon="ion-plus-round" ui-sref=".AddItem">
      <ion-nav-view name="tab-item"></ion-nav-view>
    </ion-tab>
    <ion-tab title="View Items" icon="ion-navicon-round" ui-sref=".ViewItems">
      <ion-nav-view name="tab-viewitems"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

JS

 .state('AddList.ViewItems', {
      url: '/viewitems',
      reload:true,
      views:{
        'tab-viewitems':{
          templateUrl: 'templates/ViewItems.html',
          controller: 'ExampleController',
        }
      }
    })

I have even added 'reload:true' inside its state but it still doesn't work. :( Please help. Thanks in advance :)

Controller

var example=angular.module('starter', ['ionic', 'ngCordova']);

example.controller("ExampleController", function($scope, $cordovaSQLite, $state, $ionicPopup)

 $scope.enter = function (purchasetype, stonename, size, weight, pieces, color, shape, salesprice) {
    var query = "INSERT INTO items_list (purchasetype,stonename,size,weight,pieces,color,shape,,salesprice) VALUES (?,?,?,?,?,?,?,?)";
    $cordovaSQLite.execute(db, query, [purchasetype, stonename, size, weight, pieces, color, shape, salesprice]).then(function (res) {
      var alertPopup = $ionicPopup.alert({
        title: 'Successful!',
        template: 'Record entered!'
      });
    }, function (err) {
      console.log(err);
      window.alert(err);
      });
  };

can you show the controller code that adds the items to the database? — Claies
– Claies, Commented Jan 16, 2016 at 14:26
you should edit the question to add additional code. the comments box has a character limit and does not format code. — Claies
– Claies, Commented Jan 16, 2016 at 14:36

fragilewindows · Accepted Answer · 2016-08-14 13:23:01Z

You can try using $scope.$apply(); at the end of insert function in the same controller.

The other solution is below.

Make tabs setup:

 <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon="ion-home" ng-controller="HomeCtrl" ui-sref=".home">
        <ion-nav-view name="tab-home">
        </ion-nav-view>
    </ion-tab >
    <ion-tab title="Add Item" icon="ion-plus-round" ng-controller="AddItemCtrl" ui-sref=".AddItem">
        <ion-nav-view name="tab-item"></ion-nav-view>
    </ion-tab>
    <ion-tab title="View Items" icon="ion-navicon-round" ng-controller="ViewItemsCtrl" ui-sref=".ViewItems">
        <ion-nav-view name="tab-viewitems"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Controllers:

 example.controller("AddItemCtrl", function($scope, $cordovaSQLite, $state, $ionicPopup) {
$scope.enter = function (purchasetype, stonename, size, weight, pieces, color, shape, salesprice) {
    var query = "INSERT INTO items_list (purchasetype,stonename,size,weight,pieces,color,shape,,salesprice) VALUES (?,?,?,?,?,?,?,?)";
    $cordovaSQLite.execute(db, query, [purchasetype, stonename, size, weight, pieces, color, shape, salesprice]).then(function (res) {
        var alertPopup = $ionicPopup.alert({
            title: 'Successful!',
            template: 'Record entered!'
        });
    }, function (err) {
        console.log(err);
        window.alert(err);
    });
};
});

example.controller("ViewItemsCtrl", function($scope, $cordovaSQLite, $state, $ionicPopup){
// get values from DB..!
});

Gowtham · Accepted Answer · 2016-10-17 08:54:04Z

0

You can include pull to refresh function for each views.

put this code inside your content and it will add pull to refresh function for your views,

<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>

make sure your views final structure looks something like this,

<ion-view>
   <ion-content>
       <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
    </ion-refresher>
   </ion-content>
</ion-view>

Hope that helps!

answered Oct 17, 2016 at 8:54

Gowtham

3,2332 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

How can I refresh a view in Ionic and AngularJS to display the updated data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related