0
http://jsonplaceholder.typicode.com/usersのようなリモートサーバ上のリソースを取得し、リストに追加したり削除したりするために、service/factoryに複数のpost/getメソッドを実装する必要があります。私はデータを取得し、取得/ポストでサーバーにデータを追加することができます。表の行を削除するコードが機能していません。私はコントローラーと非推奨のコードでこれをやっています：/工場で複数のメソッドを使用するための他の解決方法はすべて私にとってはうまくいかず、何か行方不明になります。here、here、here、hereおよびhereここに私のコードは次のとおりです。 HTML：あなたのapp.jsであなたのモジュールを定義していないようAngularjs JSONのサービスへのポスト/取得方法
app.factory('userservice', ['$http', function($http) {
return $http.get('http://jsonplaceholder.typicode.com/users')
.success(function(data) {
console.log(data);
return data;
})
.error(function(err) {
console.log(err);
return err;
});
}]);<!doctype html>
<html>
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" /> -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="MailApp">
<div class="main" ng-controller="MainController">
<div class="container">
<div class="row">
<div class="forecast">
<table class="table table-bordered table table-hover">
<tr>
<th class="info" rowspan="2">ID</th>
<th class="info" rowspan="2">Name</th>
<th class="info" rowspan="2">User Name</th>
<th class="info" rowspan="2">Email</th>
<th class="info" colspan="3">Address</th>
</tr>
<tr>
<th class="info" >Street</th>
<th class="info">Suite</th>
<th class="info">City</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.id }}
<button data-ng-click="removeUser($index)">Remove</button>
<button data-ng-click="removePost()">Remove row</button>
</td>
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>{{ user.address.street }}</td>
<td>{{ user.address.suite }}</td>
<td>{{ user.address.city }}</td>
</tr>
</table>
<table class="table table-bordered table table-hover">
<tr>
<td><input type="text" ng-model="newPost.id" placeholder="User id"></td>
<td><input type="text" ng-model="newPost.name" placeholder="User name"></td>
<td><input type="text" ng-model="newPost.username" placeholder="User username"></td>
<td><input type="text" ng-model="newPost.email" placeholder="User email"></td>
<td><input type="text" ng-model="newPost.address.street" placeholder="User street"></td>
<td><input type="text" ng-model="newPost.address.suite" placeholder="User suite"></td>
<td><input type="text" ng-model="newPost.address.city" placeholder="User city"></td>
</tr>
</table>
<button ng-click="addUser()">Add user</button>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Services -->
<script src="js/services/userservice.js"></script>
<!-- Directives -->
</body>
</html>app.controller('MainController', ['$scope', 'userservice', '$http', function($scope, userservice, $http) {
$scope.users = [];
userservice.success(function(data) {
$scope.users = data;
});
$scope.addUser = function(){
$http.post("http://jsonplaceholder.typicode.com/users",{
id: $scope.newPost.id,
name: $scope.newPost.name,
username: $scope.newPost.username,
email: $scope.newPost.email,
address:
{
street : $scope.newPost.address.street,
suite : $scope.newPost.address.suite,
city : $scope.newPost.address.city
}
})
.success(function(data, status, headers, config){
console.log(data);
$scope.users.push($scope.newPost);
$scope.newPost = {};
})
.error(function(error, status, headers, config){
console.log(error);
});
}
//simple remove array remove function
$scope.removeUser = function(index)
{
$scope.users.splice(index, 1);
}
//not working properly localy - raised issue on stack
$scope.removePost = function() {
var data =
{
id: $scope.newPost.id
}
//Error: $scope.newPost is undefined
//forwarding paramaeters directly or with pulling them with $routeParams and index 'id'
$http.delete('http://jsonplaceholder.typicode.com/users/' + data)
.success(function (data, status, headers, config) {
$scope.ServerResponse = data;
})
.error(function (data, status, header) {
$scope.ServerResponse = htmlDecode("Data: " + data +
"\n\n\n\nstatus: " + status +
"\n\n\n\nheaders: " + header +
"\n\n\n\nconfig: " + config);
});
};
}]);
ここには非常に多くのコードがあります。コードのどの部分に問題がありますか？ – Toby
コントローラから工場にユーザーを追加/削除するためのコードを移動しようとしていますが、リンク上の上記の解決策は機能しません。私は工場では、ユーザーを追加するためのポスト、ユーザーの追加と削除の3つのメソッドが必要です。私は、これらの3つの方法を因子で実装し、それをコントローラで呼び出す方法を見分けることができません。 – user2577919