Answer the question
In order to leave comments, you need to log in
How to get data from form and send it with put method in api?
How to get data from form and send it with put method in api?
Main file index.html
<!DOCTYPE html>
<html lang='en' ng-app='userApp'>
<head>
<meta charset="utf-8">
<title>Angular App</title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js'></script>
<script src='app/app.js'></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
'use strict';
var userApp = angular.module('userApp',['ngRoute']);
userApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl:'template/home.html',
controller:'UserListCtrl'
})
.when('/edit/:userId', {
templateUrl:'template/edit.html',
controller:'EditUserCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
userApp.controller('UserListCtrl',['$scope', '$http', '$location', function($scope, $http, $location){
$scope.title = 'Users';
$http({
method: 'GET',
url: 'http://9000.000.000.0008081/test/users'
}).then(function successCallback(response) {
$scope.users = response.data;
}, function errorCallback(response) {
console.log(response);
});
}]);
userApp.controller('EditUserCtrl',['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
$scope.title = 'Edit User ' + $routeParams.userId;
$scope.userId = $routeParams.userId;
}]);
Answer the question
In order to leave comments, you need to log in
Use $resource
var app = angular.module('myApp', []);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl:'template/home.html',
controller:'UsersCtrl'
})
.when('/edit/:userId', {
templateUrl:'template/edit.html',
controller:'EditCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
// Создаем фабрику для работы с ресурсом пользователей
app.factory('UserResource', function ($resource){
// Возвращаем ресурс, ссылка на документацию выше
return $resource(
'/test/users/:action', // роут для работы
{id: '@id'}, // поле идентификатор
{
update: { // переопределим метод update
method: 'PUT', // тип запроса
params: {action: 'edit'} // параметр action в роуте
},
}
);
});
// Контроллер списка пользователей
app.controller('UsersCtrl', function ($scope, UserResource) {
// запрос на список пользователей
$scope.users = UserResource.query();
});
// Контроллер редактирования пользователя
app.controller('EditCtrl', function ($scope, UserResource, $routeParams) {
// Загружаем текущего пользователя по ид из роута
$scope.user = UserResource.get({id: $routeParams.userId});
// Функция сохранения пользователя, form - объект формы
$scope.saveUser = function(form){
// Вызываем переопределенный метод update
UserResource.update($scope.user)
.$promise
// Ловим ошибки
.catch(function(err){
console.error(err);
});
};
});
<ul>
<li ng-repeat="user in users"><a href="/edit/{{user.id}}">{{user.name}}</a></li>
</ul>
<form class="form" name="form" ng-submit="saveUser(form)" novalidate>
<input type="text" ng-model="user.name">
<button class="btn btn-default" type="submit" ng-disabled="form.$invalid">Сохранить</button>
</form>
<!DOCTYPE html>
<html lang='en' ng-app='myApp'>
<head>
<meta charset="utf-8">
<title>Angular App</title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js'></script>
<script src='app/app.js'></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question