Angular passing $scope data into PUT request

问题

I'm working on a mean stack crud and am close having it fully functional but am stuck trying to pull in the actual data from the form fields. I currently have the array values hard coded, which works but I'd like to replace the 'edited' with the entered form field values.

My angular PUT request:

$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);
        });
}; 

My angular form:

  <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>

My initial idea was to replace the 'edited' values with $scope.serviceTitle but that doesn't seem to work. The payload returns empty.

回答1:

I figured it out by passing the values in as parameters like the following.

$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);
        });
}; 

My form:

      <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:

I think below is the right way to do it, its my assumption you are populating $scope.service in some previous code. Notice I remove place holder, and used $scope.service as ng-model variable.

$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>

来源：https://stackoverflow.com/questions/25161885/angular-passing-scope-data-into-put-request