javascript - Angularjs: View not updating list after POST -
i working on small angularjs app user profile management app.
the problem having adding users dynamically. when enter user data, post's local server have setup, have refresh page see new user in users list
i dont want have refresh.
-yes i've tried $scope.apply() after running post function
something noticing angular batarang (debugging tool), scope updating fine, there blank spot or 'null' value new user should be.
here controllers:
usersapp.controller('userlistcontroller', [ '$scope', 'userservice', function($scope, userservice) { $scope.userslist = userservice.userslist; $scope.users = userservice.users; $scope.user = userservice.user; }]); usersapp.controller('addusercontroller', function($scope, $window, dataresources, userservice) { $scope.addnew = function addnew(newuser) { $scope.userslist = userservice.userslist; var firstname = newuser.firstname; var lastname = newuser.lastname; var phone = newuser.phone; var email = newuser.email; $scope.newuserdata = { firstname , lastname, phone , email } new dataresources.create($scope.newuserdata); $scope.userslist.push(dataresources); $scope.$apply(); }; and here views:
add user:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="js/minimize.js"></script> <div ng-controller="addusercontroller"> <div class="userinfo" id="usernamediv"> <h2 id="username">user<img id="showhide" src="images/plus.png" style="position:absolute; padding-left:15px; width:31px; color:white;"></h2> </div> <div class="userinfo"> <div id="listinfo"> <form ng-controller="addusercontroller"> <input type="text" placeholder= "first name" ng-model="newuser.firstname"></input> <input type="text" placeholder= "last name" ng-model="newuser.lastname"></input> <input type="text" placeholder= "phone number" ng-model="newuser.phone"></input> <input type="text" placeholder= "email" ng-model="newuser.email"></input> <button type="submit" ng-click="addnew(newuser)">add user</button> </form> </div> </div> users list:
<!doctype html> <html> <head></head> <body id=""> <div ng-controller="userlistcontroller"> <div class="userinfo"> <h2>list of users</h2> <div id="listinfo"> <ul style="list-style-type: none;"> <li ng-repeat="user in userslist"> <!--<p class="userdata">id: {{ user }}</p> --> <p class="userdata"><a style="cursor:pointer;" ui-sref="userprofile">{{ user.firstname }}</a></p> </li> </ul> </div> </div>
factory , service:
usersapp.factory('dataresources', [ '$resource', function($resource) { return $resource('http://localhost:24149/users/:id', {}, { query: {method:'get', params:{idnum: '@id'}, isarray:true}, create: {method:'post', headers: { 'content-type': 'application/json' }}, update: {method:'put', params:{idnum: '@id'}}, remove: {method:'delete', params:{idnum:'@id'}, isarray:true} }); }]); usersapp.service('userservice', function(dataresources) { return { userslist: dataresources.query() } });
i'm not sure if follow exactly, believe need deal promise post , push result. e.g.,
dataresources.create($scope.newuserdata).$promise.then(function(data) { $scope.userslist.push(data); }); your service return promise , when post complete service should return new user , add current list.
Comments
Post a Comment