Question

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

控制器：

//Details
   .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.xform = {};

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

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

   })

表单设置对象（仅用于大小写）：

//DetailView Forms
    detailForm = {
        'clients': {
            'clid' : {'type': 'hidden', 'label': null},
            'client_name' : {'label': 'Name'},
      'contact': {'label': 'Contact'},
      'email': {'type':'email', 'label': 'EMail'},
      'phone': {'label': 'Phone'}
        },
        'transaction' : {
            'id' : {'type': 'hidden', 'enabled': false, 'label': null},
      'dat': {'label': 'Дата'},
      'project_id' : {'label':'Project ID'},
      'pay_type_id': {'label': 'Pay type'},
      'summ' : {'type': 'text', 'enabled': true, 'label': 'Sum', 'class':'ssg'},
        },
        'projects' : {
            'pid' : {'type':'hidden', 'enabled': false, 'label': null},
            'project_name' : {'type': 'text', 'enabled': true, 'label': 'Project name'},
      'client_id': {'label': 'Client ID', }
        }
    };

Answer 1

我自己找到了答案，pixelbits向我展示了方式，双向绑定应该可以解决问题。

更正功能是：

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

我正在记录响应对象，当我在表单中更改它时会更改。

如果有人遇到同样的问题，请在此处更新代码：

模板：

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

   })

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

1 个答案: