Просто начался с углового. Мне удалось сохранить и извлечь данные из БД с помощью php. Я также могу зацикливать данные в элементе списка, но когда я добавляю нового пользователя, список не обновляется, только когда я обновляю браузер, он показывает вновь добавленного пользователя
это мой html-код:
<div> <ul ng-init="get_user()"> <li ng-repeat="user in userInfo ">{{user.user_name}}<a href="" ng-click="prod_delete(product.id)"> --> Delete</a></li> </ul> </div>
это мой код app.js:
var app = angular.module('AddUser', ['ui.bootstrap']); app.controller('AppCtrl', function($scope, $http){ $scope.userInfo = []; /** function to add details for a user in mysql referecing php **/ $scope.save_user = function() { $http.post('db.php?action=add_user', { 'user_name' : $scope.user_name, 'user_email' : $scope.user_email } ) .success(function (data, status, headers, config) { $scope.userInfo.push(data); console.log("The user has been added successfully to the DB"); console.log(data); }) .error(function(data, status, headers, config) { console.log("Failed to add the user to DB"); }); } /** function to get info of user added in mysql referencing php **/ $scope.get_user = function() { $http.get('db.php?action=get_user').success(function(data) { $scope.userInfo = data; console.log("You were succesfull in show user info"); //console.log(data); }) } });
По мере того как вы выполняете почтовый вызов, который сохраняет данные в DB по методу сервера, но в вашем успехе почтового вызова вы userInfo
эти данные в объекте userInfo
что технически звучит неправильно.
Я бы предпочел, чтобы вы сделали ajax для получения новых данных из db, используя $scope.get_user()
после $scope.get_user()
.
Код
$scope.save_user = function() { $http.post('db.php?action=add_user', { 'user_name' : $scope.user_name, 'user_email' : $scope.user_email }).success(function (data, status, headers, config) { //$scope.userInfo.push(data); //remove this line $scope.get_user(); //this will fetch latest record from DB console.log("The user has been added successfully to the DB"); console.log(data); }).error(function(data, status, headers, config) { console.log("Failed to add the user to DB"); }); }
Попробуйте изменить пользователя:
$scope.save_user = function() { $http.post('db.php?action=add_user', { 'user_name' : $scope.user_name, 'user_email' : $scope.user_email }) .success(function (data, status, headers, config) { $scope.userInfo.push(data.data); console.log("The user has been added successfully to the DB"); console.log(data); }) .error(function(data, status, headers, config) { console.log("Failed to add the user to DB"); }); }
Я думаю, что ваши данные, которые вы возвращаете, являются объектом, и любые данные, которые вы ожидаете, будут data.data, поэтому вы нажимаете недопустимый объект на свой массив userInfo