AngularJS default value for ng-model - angularjs

Question

Is it possible to make ng-models get default values, like ''?
I have a form on which I have used jQuery's serialize function, and whenever a a value is not present, it will still include it in the serialized data, E.g. {name: '', age: ''}.
However, when I use try using posting it by using Angular's $http and getting the model from $scope, it appears as undefined when it is empty.

Answer 1

You may also try:
<div ng-init="foo={}">
<input type="text" ng-model="foo.name=''"/>
</div>
or:
<input type="text" ng-init="foo.name=''"/>
it will present:
foo = { name: '', .... }

Answer 2

You can simply define the properties on the model in the scope in advance of using them in your view.
If you show your controller code I'll show you what you need to update to add them to the scope.
It should look something like:
In your js file that defined the app
angular.module("MyModule", []).controller('MyCtrl', ['$scope', function ($scope) {
$scope.myModel = {name:""};
}]);
In your HTML
<input type="text" ng-model="myModel.name"/>
Note I prefer not having global variables/functions so I'm using a different syntax provided by Angular to avoid this and to allow for minification.

Answer 3

You shouldn't need to use jQuery serialize.
Your form should be bound to the scope like this:
<form ng-controller="MyCtrl" ng-submit="submit()">
<input type="text" name="name" ng-model="formData.name">
<input type="text" name="age" ng-model="formData.age">
<input type="submit" value="Submit Form">
</form>
function MyCtrl($scope) {
$scope.formData = {};
$scope.submit = function() {
$http.post('/someUrl', $scope.formData)
};
}
So that in $http you can simply pass $scope.formData.
Is there a more effective way to serialize a form with angularjs?

Answer 4

Sometimes, you don't know if the value is set or not. That's what defaults are for.
I use this when I need to make sure a variable has some value. You can set it in your controller
$scope.possiblyEmptyVariable = $scope.possiblyEmptyVariable || "default value";
Works great without Angular as well
// some object that may or may not have a property 'x' set
var data = {};
// Set default value of "default"
// carefull, values like 'null', false, 0 will still fall to defaults
data.x = data.x || "default";
// Set default value of "default"
// this will not fall to defaults on values like 'null', false, 0
data.x = !"x" in data || "default";
If you need to set a bunch of values, use angular.extend or jQuery.extend
data.z = "value already set";
var defaults = { x: "default", y: 1, z: "default" };
var newData = angular.extend({}, defaults, data);
// { x: "default, y: 1, z: "value already set" }
Hope that helps