Angular JS:在PUT请求中发送表单字段数据(如POST一样)

时间:2013-06-29 06:46:10

标签: rest angularjs

我正在尝试编写一个执行所有四个REST动词(GET / POST / PUT / DELETE)的客户端,并且除了PUT之外已经完成了所有操作。我正在使用的REST / CRUD API想要通过调用PUT / realmen / ID-string来更新条目,并将键值对包括为JSON。对于POST,这似乎“自动”工作,但不适用于PUT。

我的HTML看起来像:

<div id="list">
<form novalidate class="edit-form">
<p>Title <input ng-model="realmen.title" type="text" value="{{realmen.title}}" /></p>
<p>Real Men <input ng-model="realmen.realmen" type="text" value="{{realmen.realmen}}" />  </p>
<p>Real Role-Players <input ng-model="realmen.realroleplayers" type="text" value="realmen.realroleplayers}}" /></p>
<p>Loonies <input ng-model="realmen.loonies" type="text" value="{{realmen.loonies}}" /></p>
<p>Munchkins <input ng-model="realmen.munchkins" type="text" value="{{realmen.munchkins}}" /></p>
<input ng-model="realmen.entryId" type="hidden" value="{{entryId}}"/>
<button ng-click="change()">UPDATE ({{entryId}})"</button></p>
</form>
</div>

我的控制器如下:

$scope.realmen = RealMen.get({entryId: $routeParams.entryId}, function() {
      $scope.master = angular.copy($scope.realmen); // For resetting the form
});

$scope.change = function() {
    console.log($scope.realmen);
    RealMen.update({entryId: $scope.entryId}, function() {
            $location.path('/');
    });
}

最后,我的服务看起来像:

angular.module('realmenServices', ['ngResource']).
factory('RealMen', function($resource){
    var RealMen = $resource(
        'http://localhost\\:3000/realmen/:entryId',
        {},
        {
                query: {method:'GET', params:{entryId:''}, isArray:true},
                post: {method:'POST'},
                update: {method: 'PUT', params:{entryId:'@entryId'}},
                remove: {method:'DELETE'}
        });

    return RealMen;
});

在URL中使用正确的id值调用PUT,但Request Payload仅包含entryId,因此后端API不会获得预期的键和值,并且基本上会清空数据库中的记录。

console.log($ scope.realmen)确实显示了表单字段以及大量额外数据。我尝试调用RealMen.update($ scope.realmen,...)(类似于调用.save()),但所有这些额外的字段都以一种非常丑陋的方式作为查询字符串参数添加到URL中。

1 个答案:

答案 0 :(得分:0)

由于您的$scope.realmen是资源实例,而不是使用RealMen.update,因此您只需拨打$scope.realmen.$update()(请注意,有“$”)。实例操作方法将负责为您发送数据。