Javascript AngularJS：序列化动态生成的表单

用AngularJS编写小型web应用程序。我有一个动态生成的表单，所以我需要序列化它以将数据发送到服务器。但我面临的问题是：当我序列化表单时，它会返回所有内容，但不会返回序列化数据。我不想使用jQuery，所以谁能帮我只通过AngularJS序列化数据

以下是代码：

HTML模板：

<div ng-controller="DetailsSet as det" ng-init="det.refresh()">
<h1>Editing ({{det.zone}})</h1>
<a ng-href="#{{det.zone}}" class="btn"><i class="m-icon-swapleft"></i> Back</a>

    <form name="det.xform" ng-submit="det.submit()">
        <div ng-repeat="(key,val) in det.formItems" class="control-group">
            <label for="{{key}}" class="control-label">{{val.label}}</label>
            <input type="{{val.type || 'text'}}" ng-model="det.response[key]" class="{{val.class}}" />
        </div>
        <hr />
        <input type="submit" value="Save" />
    </form>
    <ul>
        <li ng-repeat="(key,value) in det.response"><b>{{key}}</b>: {{value}}</li>
    </ul>
</div>

表单设置对象（仅用于案例）：

---

我自己找到了答案，pixelbits为我指明了方向，双向绑定应该可以做到这一点

修正后的功能是：

this.submit = function() {
        console.log(this.response);
      };

我正在记录响应对象，它会随着我在表单中的更改而更改

如果有人遇到同样的问题，以下是更新的代码：

模板：

<div ng-controller="DetailsSet as det" ng-init="det.refresh()">
<h1>Editing ({{det.zone}})</h1>
<a ng-href="#{{det.zone}}" class="btn"><i class="m-icon-swapleft"></i> Back</a>

    <form name="det.xform" ng-submit="det.submit()">
        <div ng-repeat="(key,val) in det.formItems" class="control-group">
            <label for="{{key}}" class="control-label">{{val.label}}</label>
            <input type="{{val.type || 'text'}}" ng-model="det.response[key]" class="{{val.class}}" />
        </div>
        <hr />
        <input type="submit" value="Save" />
    </form>
    <ul>
        <li ng-repeat="(key,value) in det.response"><b>{{key}}</b>: {{value}}</li>
    </ul>
</div>

<div ng-controller="DetailsSet as det" ng-init="det.refresh()">
<h1>Редактирование записи ({{det.zone}})</h1>
<a ng-href="#{{det.zone}}" class="btn"><i class="m-icon-swapleft"></i> Вернуться</a>

    <form name="xform" ng-submit="det.submit()" id="det-form">
        <div ng-repeat="(key,val) in det.formItems" class="control-group">
            <label for="{{key}}" class="control-label">{{val.label}}</label>
            <input type="{{val.type || 'text'}}" ng-model="det.response[key]" value="{{det.response[key]}}" />
        </div>
        <hr />
        <input type="submit" value="Сохранить" />
    </form>
    <ul>
        <li ng-repeat="(key,value) in det.response"><b>{{key}}</b>: {{value}}</li>
    </ul>
</div>

---

您不需要序列化/反序列化请求/响应数据。好的，那么将表单数据发送到服务器的最佳实践是什么？$http（{method:'POST'，url:'/someurl'，data:mydata}）。然后（…）；其中mydata是一个对象文本（通常是从GET请求中检索到的返回数据绑定的）。我如何将表单输入的值包装到mydata？

<div ng-controller="DetailsSet as det" ng-init="det.refresh()">
<h1>Редактирование записи ({{det.zone}})</h1>
<a ng-href="#{{det.zone}}" class="btn"><i class="m-icon-swapleft"></i> Вернуться</a>

    <form name="xform" ng-submit="det.submit()" id="det-form">
        <div ng-repeat="(key,val) in det.formItems" class="control-group">
            <label for="{{key}}" class="control-label">{{val.label}}</label>
            <input type="{{val.type || 'text'}}" ng-model="det.response[key]" value="{{det.response[key]}}" />
        </div>
        <hr />
        <input type="submit" value="Сохранить" />
    </form>
    <ul>
        <li ng-repeat="(key,value) in det.response"><b>{{key}}</b>: {{value}}</li>
    </ul>
</div>

   .controller('DetailsSet', function($scope, $routeParams, $http) {
      $scope.params = $routeParams;
      this.zone = $scope.params.zone;
      this.formItems = detailForm[this.zone];
      this.ttl = hdrs[this.zone];

      this.submit = function() {
        console.log(this.response);
      };

      this.refresh = function() {
        var self = this;
        $http.post('app/route.php', {zone: $scope.params.zone, action: 'show', id: $scope.params.id}).success(function(data) {
          self.response = data[0];
        });
      };

   })