从 ng-repeat 发送数据

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"

除...

我怎样才能做到这一点？ 我已经有一个将数据从查询字符串转换为表单数据的函数：

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

我认为您可能使这个问题过于复杂，您有一个要 POST 回服务器的项目列表。

定义一个控制器来管理这个列表，并通过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>