Question

我使用ng-repeat模块进行表单构建：

form-{{$index}}-id
form-{{$index}}-value

这是表单的HTML：

<input type="text" id="form-0-id" />
<input type="text" id="form-0-value />
<input type="text" id="form-1-id" />
<input type="text" id="form-1-value />

我需要将输入文本值作为表单数据发送，而不是作为查询字符串。我必须使用AngularJS来做到这一点，我不能使用旧的经典按钮和POST刷新。

FORM DATA

form-0-id:"x"
form-0-value:"y"
form-1-id:"a"
form-1-value:"b"

... EXC

我怎样才能实现这一目标？我已经有一个将查询字符串中的数据转换为表单数据的函数：

app.config(function($httpProvider) {

    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function(data)
    {
        return angular.isObject(data) && String(data) !== '[object File]' ? jQuery.param(data) : data;
    }];

});

Answer 1

我认为您可能过度复杂了这个问题，您有一个要回发到服务器的项目列表。

定义一个控制器，用于管理此列表，并通过ng-submit

处理后期操作

var module = angular.module('testApp', []);

module.controller('MyCtrl', function($http){
  var self = this;
  self.items = [
    {prompt: 'prompt 1', value: 'value 1'},
    {prompt: 'prompt 2', value: 'value 2'},
    {prompt: 'prompt 3', value: 'value 3'}
  ];
  
  self.submitMe = function(){
    var url = 'http://serverUrl'
    
    //sample post code:
    //$http.post(url, self.items);
    
    //debug:
    alert('post data to ' + url + '\n' + JSON.stringify(self.items));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="MyCtrl as my">
<form ng-submit="my.submitMe()">
  <ul>
    <li ng-repeat="item in my.items">
      {{item.prompt}} <input type="text" ng-model="item.value"/ >
    </li>
  </ul>
  <button>Save</button>
</form>
  </div>

从ng-repeat发送数据

1 个答案: