简体   繁体   中英

POST Method is not Sending All Data

I am working with angular, node, express, and postgresql/sequelize in a fun little project. However, it has gotten a little too fun. I am new to developing in this environment, so I may be using some incorrect structures. But, I am trying to set up an update route for a model. The JS for the update is seemingly good, as it does as it should, but the problem here is that when the function is called and the post method is initiated, it does not grab the values from the form group, in html.

Here is a snippet of the html/angular:

<div class="container">
  <div ng-controller="SomethingCtrl">
    <form ng-submit="updateSomething(updateform)" role="form" ng-init="updateform = {}">
      <div class="datagrid"><table>
        <thead>
        <tr>
          <th> ID </th>
          <th> field1 </th>
          <th> field2 </th>
          <th> field3 </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="something in somethings | filter:{id:somethingId} | orderBy:'id' | limitTo: 1 track by $index">
          <td>
            {{something.id}}
          </td>
          <td>
            <div class="form-group">
              <input class="form-control" type="text" name="field1" value="{{something.field1}}"/>
            </div>
          </td>
          <td>
            <div class="form-group">
              <input class="form-control" type="text" name="field2" value="{{something.field2}}">
            </div>
          </td>
          <td>
            <div class="form-group">
              <input class="form-control" type="number" name="field3" value="{{something.field3}}">
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      </div>
      <div>
        <button type="submit"><strong>Update</strong></button>
      </div>
    </form>
  </div>
</div>

When I go into network analysis of this, it sends JSON data, but it does not specify the value -- but, from the response I get in console log I think it only sends current date as the only attribute that is updated is updateTime.

Here is the JS, which I think works:

exports.UpdateSomethings = function (req, res) {
  models.Something.find({
    where: {
      id: req.params.id
    }
  }).then(function (something) {
    if (something) { // if the record exists in the db    
      something.updateAttributes({
        field1: req.body.field1,
        field2: req.body.field2,
        field3: req.body.field3
      }).then(function (somethings) {
        res.json(somethings.dataValues);
      }).catch(function (error) {
        console.log("ops: " + error);
        res.status(500).json({ error: 'error' });
      });
    }
    ;
  });
};

And in the Controller:

$scope.updateSomething = function () {
  $http.post('/somethingupdate/:id', {
    field1: $scope.somethingField1,
    field2: $scope.somethingField2,
    field3: $scope.somethingField3,

  }).success(function (data, status, headers, config) {
    $scope.somethings.push({
    field1: $scope.somethingField1,
    field2: $scope.somethingField2,
    field3: $scope.somethingField3,
    });
    $scope.somethingField1 = '';
    $scope.somethingField2 = '';
    $scope.somethingField3 = '';
  }).error(function (data, status, headers, config) {
    console.log("Ops: " + data);
  });
};

Here is the result in console:

Executing (default): SELECT "id", "field", "createdAt", "updatedAt" FROM  "Soemthings" AS "Something" WHERE "Something"."id" = 'id value';
Executing (default): UPDATE "Somethings" SET "field1"='' "field2" = '' "field3" = '' "updatedAt"='2016-06-09 20:20:57.384 +00:00' WHERE "id" = id value

尝试使用ng-model =“ something.field1”代替value =“ {{something.field1}}”“,依此类推。

UPDATED!

You are passing an empty set when submit, check your updateform variable

You need to add ng-models to your inputs that starts with updateform

 <input class="form-control" ng-model="updateform.field1" type="number" name="field1" ng-init="updateform.field3 =something.field3">

And so on. Since you said you are using $scope.somethingField lets use it in your markup, then i added a hidden field for id as well.

<div class="container">
 <div ng-controller="SomethingCtrl">
<form ng-submit="updateSomething(updateform)" role="form">
  <div class="datagrid"><table>
    <thead>
    <tr>
      <th> ID </th>
      <th> field1 </th>
      <th> field2 </th>
      <th> field3 </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="something in somethings | filter:{id:1} | orderBy:'id' | limitTo: 1 track by $index">
      <td>
        <input type="hidden" ng-model="updateform.id" ng-init="updateform.id = something.id">
        {{something.id}}
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="updateform.field1" type="text" ng-init="updateform.field1 = something.field1" />
        </div>
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="updateform.field2" type="text" ng-init="updateform.field2 = something.field2" />
        </div>
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="updateform.field3" type="text" ng-init="updateform.field3 =something.field3" />
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  </div>
  <div>
    <button type="submit"><strong>Update</strong></button>
  </div>
</form>

Then in your controller outside the function $scope.updateSomething:

$scope.updateform = {
    field1: '',
    field2: '',
    field3: ''
}

Then in you controller function for update add parameter field, try to check console logs if field contains data:

$scope.updateSomething = function (field) {
    console.log(field);
    $http.post('/somethingupdate/' + field.id, {
        field: field,
    }).success(function (data, status, headers, config) {
        $scope.somethings.push({
           field: field
        });
    }).error(function (data, status, headers, config) {
        console.log("Ops: " + data);
    });
};

Here is a working JSfiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM