I have been working on adding user records and I want to display the new record instantly. The JavaScript code below is used for inserting records. User creation and displaying the users list are functioning correctly, but the newly inserted records only show up after refreshing the page.
Here is the method to retrieve all user records from the service:
var users = this;
/***********ADD A USER(TAG INPUT)************/
users.init = init;
function init(){
getMyDoers();
}
if(localStorageService.get('usersOpen') !== null){
users.usersDoers = localStorageService.get('usersOpen');
}
else
{
users.usersDoers = [];
}
localStorageService.set('usersOpen', users.usersDoers);
localStorageService.bind($scope, 'usersOpen');
users.init = init;
function init(){
getMyUsers();
}
users.getMyUsers = getMyUsers;
function getMyUsers(){
//$scope.data = [];
DataService.getMyUsers().then(function successCallback(response) {
$scope.data = response.data.results;
$scope.usersOpen.length = 0;
$scope.usersOpen.push({'data': response.data.results});
},function errorCallback(response) {
}
);
}
Js to create users.
$scope.createUser = function()
{
console.log($scope.UserID.join());
$scope.userData = 'userIds='+$scope.UserID.join();
DataService.createUser($scope.userData).then(function successCallback(response) {
console.log('created');
},function errorCallback(response) {
}
);
}
<ul>
<li ng-repeat="getMyUsers in UsersOpen[0].data track by $index">
<div class="list_left">
<div class="pro_img">
<img src="images/user.png" alt=""/>
</div>
<div class="pro_text">
<h2 class=""><a>{{ getMyDoers.firstName }}</a></h2>
<p class="">Apple, Book, Designer, Web developer</p>
<span><img src="images/location.png" alt=""/>New York, USA</span>
</div>
</div>
</li>
</ul>