I'm working in Angularjs application and I have a simple form. I need create a simple way to get all form data, something like jQuery serialize. But I thing data binding isn't a good solution. My form'll have some "fields" like this:

<div class="multiselect-container" >
<label>Countries:</label>
<ul>
    <li ng-repeat="country in countries" >
        <input type="checkbox" id="country_{{country.id}}"  value="{{country.id}}" />
        <label for="country_{{country.id}}"  >{{ country.name }}</label>
    </li>
</ul>

Each "field" I a can select a set of elements. Someone can tell me a good way to solve implement ().

Thanks!

I'm working in Angularjs application and I have a simple form. I need create a simple way to get all form data, something like jQuery serialize. But I thing data binding isn't a good solution. My form'll have some "fields" like this:

<div class="multiselect-container" >
<label>Countries:</label>
<ul>
    <li ng-repeat="country in countries" >
        <input type="checkbox" id="country_{{country.id}}"  value="{{country.id}}" />
        <label for="country_{{country.id}}"  >{{ country.name }}</label>
    </li>
</ul>

Each "field" I a can select a set of elements. Someone can tell me a good way to solve implement ().

Thanks!

• javascript
• angularjs
• serialization

• 2 Why do you think data binding is not a good solution? – Nikos Paraskevopoulos Commented Nov 3, 2013 at 20:33
• Well,don't have front experience using AngularJS. How you implement something like this example? – Miguel Q. Commented Nov 3, 2013 at 20:47
• 1 With Angular you should stop thinking about the DOM and think in terms of the model. So put an object representing your data in the $scope, bind the inputs to that object and then submit this object. – Nikos Paraskevopoulos Commented Nov 3, 2013 at 20:54
• 1 You aready have what you need to serialize in the form of your countries array bind to that with ng-model or create a different scope object to bind to. It sounds like you are using angular simply for a templating engine....and missing about 75% of it's capabilities. Easy to find tutorials ...try couple – charlietfl Commented Nov 3, 2013 at 20:58

3 Answers 3

I think data-binding is not a bad solution, anyway you can use custom directive which will serialize your data and set it as value to property you've specified:

function MC($scope) {
    $scope.$watch('prop', function (v) {
        console.log(v);
    });
}

angular.module('ng')
.directive('formSerialization', function () {
    return {
        scope: {
            'formSerialization': '='
        },
        link: function (scope, elem, attrs) {
            console.log(attrs);
            $(elem).closest('form').submit(function () {
                var form = this;
                scope.$apply(function () {
                    scope.formSerialization = $(form).serialize();
                });
            });
        }
    };
});

You can use it with the following mark-up:

<form ng-app="" ng-controller="MC">
    <input name="txt" type="text" ng-model="prop" />
    <input data-form-serialization="prop" type="submit" value="Submit" />
</form>

And here is a JSFiddle DEMO.

Thanks for your answers.Sorry I didn't expose my question in a good way, but I've found a simple soluction.

<div class="multiselect-container" >
    <label>Countries:</label>
    <ul>
        <li ng-repeat="country in countries" >
           <input type="checkbox" id="country_{{country.id}}" ng-model="data.countries[country.id]"  value="{{country.id}}" />
           <label for="country_{{country.id}}"  >{{ country.name }}</label>
        </li>
    </ul>
</div>

Thanks!

You may try this, http://docs.angularjs/api/ng/function/angular.toJson

In this way you can serialize an object to a json string