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行中的ErrorException： preg_replace（）：参数不匹配，pattern是一个字符串，而replacement是一个数组

现在看了很久。可能导致这种情况的原因是什么？谢谢！

更新选择完成后，Egoal对象看起来像这样;

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

但是句点值在post上转换为空数组...

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未定义。

将未定义的数据作为数据发送到$ http.post以某种方式将其序列化为空数组。

Answer 2

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

Answer 3

来自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'}",
  ...
}

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

3 个答案: