Why is Angular http.post converting string value to an array? - angularjs

Question

I have an Angular JS and Laravel app. One of my form feilds is an ng-options driven select. The values are strings but when I post using http.post, one of the values seems to be getting converted to an array.
I have this in my JS controller for the options;
$scope.periods = [
{label: '1'},
{label: '2'},
{label: '3'},
{label: 'OT'}
];
This is my view for the select;
<select ng-model="egoal.period"
ng-options="period.label as period.label for period in periods"
class="form-control game-control"
required>
</select>
And then this in the controller to post;
$scope.changeGoal = function() {
var egoal = this.egoal;
$http.post('api/editGoal/' + this.goal.id, egoal)
.success(function () {
$scope.egoal = {};
});
};
Oddly, when I dump the $request, I get period => [] and then this error;
ErrorException in helpers.php line 685:
preg_replace(): Parameter mismatch, pattern is a string while replacement is an array
Been looking at this for a long time now. What could be causing this?
Thanks!
UPDATE:
Egoal object looks like this after the selection is made;
EGoal: {
"id": 268,
"game": 147,
"season": 4,
"team_id": 2,
"period": "2",
"min": 7,
"sec": 54,
"scorer": 11,
}
but the period value is converted on post to an empty array...

Answer 1

$scope.changeGoal = function() {
var egoal = this.egoal;
$http.post('api/editGoal/' + this.goal.id, egoal)
A function in javascript is a block with its own scope. You need to use the vm concept. https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-with-vm
In the context of the changeGoal function, this.egoal is undefined.
Sending undefined as data to $http.post somehow serializes it to an empty array.

Answer 2

From the ngOptions docs:
When an item in the menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
So, when you select one of the items from the dropdown, your ngModel egoal.period is not 1, or 2, or 3, or OT, it's {label: '1'}, {label: '2'}, etc. It's actually a pointer to the one of the items in your $scope.periods array.
Check out this plunker to get a better idea of what I mean:
http://embed.plnkr.co/9cJ2Hy/
Your PHP script is probably expecting a json object like this:
{
...
"period": '1',
...
}
But it's actually getting something more like this:
{
...
"period": "{\"label\": '1'}",
...
}

Answer 3

AngularJS uses JSON object by default in $http.post .
You can change the default setting by adding a correct Content-Type header to the config object:
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
UPDATE:
... by simply adding:
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';
})
Or another solution would be:
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);
});