I have problem about the list page cannot update to latest list or cannot refresh after insert new data to remote server from another page in my ionic app. Its my source code:
controller.js
controller('ClientCtrl', function($scope, $ionicHistory, $timeout, $rootScope, $http, $localStorage, $cordovaSQLite, $q, $state, Model, Company) {
var deferred = $q.defer();
$http.get(url).success(function(company) {
var companies = company;
console.log (companies);
deferred.resolve(companies);
for (var i = companies.length - 1; i >= 0; i--) {
Company.add(companies[i]);
};
return deferred.promise;
})
$scope.model = [];
$scope.model = Model;
$scope.companies = [];
$rootScope.showLoading("Loading data..");
$scope.updateCompany = function() {
Company.all().then(function(company){
$scope.companies = company;
});
$rootScope.hideLoading();
}
$scope.updateCompany();
$rootScope.hideLoading();
$scope.setSelected = function(company){
$scope.model.client = company.id;
$ionicHistory.goBack();
};
})
.controller('ClientsAddCtrl', function($scope, $ionicHistory, $state, $rootScope, $http, $localStorage, $q, $window, Model) {
$scope.company = [];
$scope.company.status = $scope.options[0];
$scope.createClient = function(company) {
$scope.company.user_id = $localStorage.id;
console.log(company);
$scope.model = Model;
var newparameters = {
name : company.name,
email: company.email,
phone: company.phone,
};
console.log(newparameters);
$http.post(url, JSON.stringify(newparameters)).success(function(data, status, headers, config ) {
if (data.success === true) {
$ionicHistory.goBack();
$ionicHistory.clearCache();
$rootScope.hideLoading();
$scope.company.name = '';
$scope.company.email = '';
$scope.company.phone = '';
console.log(data, status);
} else {
$rootScope.toast("Data still not completed");
console.log(status, data);
// For JSON responses, resp.data contains the result
}}, function(err) {
$rootScope.toast('Cannot Save To Server');
console.error('ERR', err);
// err.status will contain the status code
})
}; // end scope createclient
$scope.model = Model;
})
HTML Template
addclient.html
<ion-view view-title="Add Client">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button-icon assertive icon ion-checkmark-round" ng-click="createClient(company)"></button>
</ion-nav-buttons>
<ion-content padding="true">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Company Name" ng-model="company.name">
</label>
<label class="item item-input">
<input type="tel" placeholder="Phone" ng-model="company.phone">
</label>
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="company.email">
</label>
</div>
</ion-content>
</ion-view>
clientlist.html
<ion-view cache-view="false" view-title="Choose Client">
<ion-content padding="true">
<ion-list>
<a href="#/tab/clientadd" button class="button button-block button-assertive" >
<b>Add New Client</b>
</a>
<ion-item class="item" ng-repeat="company in companies | orderBy:'-id'" type="item-text-wrap"
ng-click="setSelected(company)" ng-class="{selected: company.name == model.client}">
{{company.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
app.js
.state('tab.client', {
url: '/client',
views: {
'tab-client': {
templateUrl: 'templates/clientlist.html',
controller: 'ClientCtrl'
}
}
})
.state('tab.clientadd', {
url: '/clientadd',
views: {
'tab-client': {
templateUrl: 'templates/addclient.html',
controller: 'ClientsAddCtrl'
}
}
})
factory.js
.factory('CompanyList', function($cordovaSQLite, $q, $ionicPlatform) {
var self = this;
// Handle query's and potential errors
self.query = function (query, parameters) {
parameters = parameters || [];
var q = $q.defer();
$ionicPlatform.ready(function () {
$cordovaSQLite.execute(db, query, parameters)
.then(function (result) {
q.resolve(result);
}, function (error) {
console.warn('I found an error');
console.warn(error);
q.reject(error);
});
});
return q.promise;
}
// Proces a result set
self.getAll = function(result) {
var output = [];
for (var i = 0; i < result.rows.length; i++) {
output.push(result.rows.item(i));
}
return output;
}
// Proces a single result
self.getById = function(result) {
var output = null;
output = angular.copy(result.rows.item(0));
return output;
}
return self;
})
.factory('Company', function($cordovaSQLite, $http, CompanyList) {
var self = this;
self.all = function() {
return CompanyList.query("SELECT id, name, status FROM client")
.then(function(result){
return CompanyList.getAll(result);
});
}
self.get = function(companyId) {
var parameters = [companyId];
return CompanyList.query("SELECT id, name, email, phone FROM client WHERE id = (?)", parameters)
.then(function(result) {
return CompanyList.getById(result);
});
}
self.add = function(company) {
var parameters = [company.id,company.name, company.phone, company.email];
return CompanyList.query("INSERT OR REPLACE INTO client (id, name, phone, email) VALUES (?,?,?,?)", parameters);
}
self.remove = function(company) {
var parameters = [company.id];
return CompanyList.query("DELETE FROM client WHERE id = (?)", parameters);
}
self.update = function(origCompany, editCompany) {
var parameters = [editCompany.id, editCompany.name, origCompany.id];
return CompanyList.query("UPDATE client SET id = (?), name = (?) WHERE id = (?)", parameters);
}
return self;
});
How I can fix it so when I back to tab.client page will reload with automatically after input data in tab.clientadd page?
I am using this plugin for sqlite