Question

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.submitForm = function(cl) {
    console.log(cl);
    $http({
      method: 'POST',
      url: "updated-profile",
      data: {
        cl: cl
      },
    }).then(function successCallback(response) {
      console.log("updated successfully");
      $scope.success = "Updated successfully";
    }, function errorCallback(response) {
      console.log("not updated");
      $scope.error = "Unable to update";
    });
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="cl in clientList">
    <div id="error-messages" ng-show="error">{{error}}</div>
    <div id="success" ng-show="success">{{success}}</div>
    <div class="form-group">
      <div class="col-lg-4 col-md-4">
        <label for="fname">First Name</label>
      </div>
      <div class="col-lg-8 col-md-8 ">
        <input type="text" class="form-control" placeholder="First Name" ng-model="cl.fname" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-4 col-md-4">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-lg-8  col-md-8">
        <input type="text " class="form-control" ng-model="cl.lname" />
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-4 col-md-4">
      <label for="submit" class="sr-only">Update</label>
    </div>
    <div class="col-lg-8  col-md-8">
      <input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
    </div>
  </div>
</div>

我使用上面的代码将数据发送到服务器。我的服务器代码是

public class Update extends ActionSupport {

    private Client cl = new Client();
    private String fname;
     public String update() {
        System.out.println("testing this");
        System.out.println("client detail " + cl.getFname() + " " + 
                             cl.getLname());
        System.out.println("fname"+getFname());
  }
}

我正在

client detail null null 
fnamenull

如果我使用data: {fname: cl.fname},，那么fnamenull。我无法使用angular post to action传递任何值。这有什么不对？在这里做了哪些改变才能正常工作？

Answer 1

您的按钮

<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />

必须位于ng-repeat循环内，否则它将无法访问cl对象，因为它是ng-repeat范围的本地对象。

或者，如果您希望按钮为“全局”，则可以在clientList中提交整个ng-submit，然后循环浏览控制器内的数组。这取决于您的流程以及项目所需的UX / UI。

Answer 2

$http({
  method: 'POST',
  url: "www.mylocalhost.com/api/updated-profile",
  data: {
    cl: cl
  },
});

当您调用$ http服务时，“url”参数应包含正确的api路径。只需使用有效的api url。我希望它能奏效。

或者更改“cl”：$ scope.clientList

angular post正在向服务器发送空值

2 个答案: