gpt4 book ai didi

javascript - Angularjs:查看 POST 后未更新列表

转载 作者:行者123 更新时间:2023-11-28 19:09:43 25 4
gpt4 key购买 nike

我目前正在开发一个小型 angularjs 应用程序,它基本上是一个用户配置文件管理应用程序。

我遇到的问题是动态添加用户。当我输入用户数据时,它成功发布到我设置的本地服务器,但我必须刷新页面才能在用户列表中看到新用户

我显然不想刷新。

-是的,我在运行 POST 函数后尝试过 $scope.apply()

我在 Angular Batarang(调试工具)中注意到的一点是,范围更新得很好,但新用户应该在的位置有一个空白点或“空”值。

这是 Controller :

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();

};

这是我的观点:

添加用户:

<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>

用户列表:

<!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>

工厂和服务:

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()
}

});

最佳答案

我不确定我是否完全遵循,但我相信您需要处理 POST 中的 promise ,然后推送结果。例如,

  dataResources.create($scope.newUserData).$promise.then(function(data) {
$scope.usersList.push(data);
});

您的服务将返回一个 promise ,然后当 POST 完成时,您的服务应该返回新用户,您只需将其添加到当前列表中即可。

关于javascript - Angularjs:查看 POST 后未更新列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30945206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com