Angular 将 $scope 数据传递到 PUT 请求中答案

【问题标题】：Angular passing $scope data into PUT requestAngular 将 $scope 数据传递到 PUT 请求中
【发布时间】：2014-09-29 11:27:01
【问题描述】：

我正在处理一个平均堆栈 crud，并且即将使其功能齐全，但我一直试图从表单字段中提取实际数据。我目前对数组值进行了硬编码，可以使用，但我想用输入的表单字段值替换“已编辑”。

我的角度 PUT 请求：

$scope.editService = function(id) {
    $http.put('/api/hc/' + id, 
              {title: 'edited',
               shortname: 'edited',
              summary: 'edited',
              description: 'edited'}
              )
       .success(function(data) {

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

我的角形：

  <form name="editForm" ng-submit="editService(service._id)" ng-repeat="service in services | filter:json">
  <input type="text" placeholder="{{ service.title}}" ng-model="serviceTitle" required>
  <input type="text" placeholder="{{ service.shortname}}" ng-model="serviceShortname" required>
  <input type="text" placeholder="{{ service.description}}" ng-model="serviceSummary" required>
  <textarea type="text" placeholder="{{ service.summary}}" ng-model="serviceDescription" required></textarea>
  <button type="submit">Edit</button>
  </form>

我最初的想法是用 $scope.serviceTitle 替换“已编辑”的值，但这似乎不起作用。有效载荷返回空。

【问题讨论】：

标签： angularjs rest mean-stack

【解决方案1】：

我是通过将值作为参数传递进来的，如下所示。

$scope.editService = function(id, ok, shortname, summary, descrip) {
    $http.put('/api/hc/' + id, 
              {title: ok,
               shortname: shortname,
              summary: summary,
              description: descrip}
              )
       .success(function(data) {

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

我的表格：

      <form name="editForm" ng-submit="editService(service._id, title, shortname, summary, descrip)" ng-repeat="service in services | filter:json">
  <input type="text" placeholder="{{ service.title}}" ng-model="title" required>
  <input type="text" placeholder="{{ service.shortname}}" ng-model="shortname" required>
  <input type="text" placeholder="{{ service.description}}" ng-model="summary" required>
  <textarea type="text" placeholder="{{ service.summary}}" ng-model="descrip" required></textarea>
  <button type="submit">Edit</button>
  </form>

【讨论】：

【解决方案2】：

我认为下面是正确的方法，我假设您在之前的一些代码中填充了 $scope.service。请注意，我删除了占位符，并使用 $scope.service 作为 ng-model 变量。

$scope.submit = function() {
$http.put('/api/hc/' + $scope.service.id, $scope.service)
   .success(function(data) {

    })
    .error(function(data) {
        console.log('Error: ' + data);
    });
}; 

<form name="editForm" ng-submit="submit()" ng-repeat="service in services | filter:json">
<input type="text" ng-model="service.title" required>
<input type="text" ng-model="service.shortname" required>
<input type="text" ng-model="service.description" required>
<textarea type="text" ng-model="service.summary" required></textarea>
<button type="submit">Edit</button>
</form>

【讨论】：