为什么 Angular http.post 将字符串值转换为数组？

Question

我有一个 Angular JS 和 Laravel 应用程序。我的表单字段之一是ng-options 驱动选择。这些值是字符串，但是当我使用 http.post 发布时，其中一个值似乎正在转换为数组。

我的 JS 控制器中有这个选项；

    $scope.periods = [
    {label: '1'},
    {label: '2'},
    {label: '3'},
    {label: 'OT'}
];

这是我对选择的看法；

<select ng-model="egoal.period"
        ng-options="period.label as period.label for period in periods"
        class="form-control game-control"
        required>
</select>

然后这个在控制器中发布；

  $scope.changeGoal = function() {
        var egoal = this.egoal;
        $http.post('api/editGoal/' + this.goal.id, egoal)
            .success(function () {
                $scope.egoal = {};
            });
};

奇怪的是，当我转储$request 时，我得到period => [] 然后这个错误；

helpers.php 第 685 行中的错误异常： preg_replace()：参数不匹配，pattern是字符串而replacement是数组

关注这个很久了。这可能是什么原因造成的？
谢谢！

更新： 选择后egoal对象是这样的；

EGoal: {
  "id": 268,
  "game": 147,
  "season": 4,
  "team_id": 2,
  "period": "2",
  "min": 7,
  "sec": 54,
  "scorer": 11,
}

但周期值在发布时转换为空数组...

Answer 1

  $scope.changeGoal = function() {
        var egoal = this.egoal;
        $http.post('api/editGoal/' + this.goal.id, egoal)

javascript 中的函数是具有自己作用域的块。您需要使用vm 概念。 https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-with-vm

在 changeGoal 函数的上下文中，this.egoal 是未定义的。

将 undefined as data 发送到 $http.post 以某种方式将其序列化为一个空数组。

Answer 2

来自 ngOptions 文档：

当菜单中的一个项目被选中时，被选中的选项所代表的数组元素或对象属性将被绑定到ngModel指令所标识的模型上。

因此，当您从下拉列表中选择其中一项时，您的 ngModel egoal.period 不是 1，或 2，或 3，或 OT，而是 {label: '1'}, {label: '2'}，等等。实际上是指向 $scope.periods 数组中的一项的指针。

查看这个 plunker 以更好地理解我的意思： http://embed.plnkr.co/9cJ2Hy/

您的 PHP 脚本可能需要这样的 json 对象：

{
  ...
  "period": '1',
  ...
}

但它实际上变得更像这样：

{
  ...
  "period": "{\"label\": '1'}",
  ...
}

Answer 3

AngularJS 在 $http.post 中默认使用 JSON 对象。

您可以通过向配置对象添加正确的 Content-Type 标头来更改默认设置：

headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 

更新：

...只需添加：

angular.module('myApp', [])
        .config(function ($httpProvider) {
            $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
            $httpProvider.defaults.headers.post['Content-Type'] =  'application/x-www-form-urlencoded';
        })

或者另一种解决方案是：

return $http({
         method: 'POST',
         url: "/yoururl/",
         data:{
            'param1': "Test",
         },
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         }}).then(function(result) {
             console.log(result);
         }, function(error) {
             console.log(error);
         });