私はAngularJSの初心者であり、初めてです。編集/更新機能を構築しようとしています。
編集機能はあまり機能しません。モデルデータをフォーム入力にコピーするだけです。
// Edit post
$scope.editPost = function(post){
$scope.title = post.title;
$scope.link = post.link;
};
更新機能は、（更新ボタンをクリックした後）入力の編集されたデータを取得して、投稿モデルを更新する必要があります。
// Update post
$scope.updatePost = function(post){
posts.update(post, {
title: $scope.title,
link: $scope.link
}).success(function() {
ToastService.show('Post updated');
});
};
編集パートは機能します。タイトル入力を編集して編集フォームの送信ボタンをクリックすると、PUTリクエストが送信されますが、PUT内で更新されたデータが送信されないようです。元のリクエストを送信するだけです。データ。
posts.jsサービス：
angular.module('bidrp')
.factory('posts', [
'$http',
function($http){
var o = {
posts: [{title:"hey", upvotes:123}]
};
o.update = function(post) {
return $http.put('/posts/' + post.id, post).success(function(data){
o.posts.push(data);
});
};
Postが表示され、editPostがトリガーされるテンプレート：
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<md-button class="md-icon-button md-accent" aria-label="Vote-Up" ng-click="incrementUpvotes(post)">
<i class="material-icons">thumb_up</i>
</md-button>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a>
</span>
<span>
<a href="#/posts/{{post.id}}">Comments</a>
<a href="#" ng-click="editPost(post); showEditForm = ! showEditForm">Edit</a>
<a href="#" ng-click="deletePost(post)">Delete</a>
</span><br>
<div ng-show="showEditForm" ng-include="'home/_edit-post.html'"></div>
</div>
<div ng-include="'home/_add-post.html'"></div>
_edit-post.html部分的：
<form ng-submit="updatePost(post)">
<h3>Edit post</h3>
<div ng-include="'home/_form-post.html'"></div>
</form>
_form-post.html部分的：
<md-input-container>
<label>Title</label>
<input required type="text" ng-model="title">
</md-input-container>
<md-input-container>
<label>Link</label>
<input type="text" ng-model="link">
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
何が間違っていますか？編集したフォームデータをPUTリクエスト内で送信するにはどうすればよいですか？
これは、が、ngRepeatによって生成された元のpostオブジェクトを$ scope.postではなくupdate関数に渡しているために発生しています。ng-model = "post"を使用すると、これは$ scopeオブジェクトにアタッチされます。
editPost関数は必要ありません。新しいデータは、ngModelディレクティブによって$ scope.title / $ scope.titleに既に渡されています（これを行うと、$ scope.tile、$ scope.linkが古い値で再更新されます）：
// Edit post
$scope.editPost = function(post){
$scope.title = post.title;
$scope.link = post.link;
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加