AngularJS - submit form with checkboxes via ajax

Problem

I have a form with checkboxes and other input fields. The data-ns-form directive is used for submitting form data via ajax. The controller for this form is UserController.

HTML

<div ng-controller="UserController">
  <form data-ns-form="formData">
    Full Name : <input type="text" name="fullname" ng-model="formData.fullname" />
    Favourite Beverage :
    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[0]" value="coffee"> Coffee
    </label>

    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[1]" value="tea"> Tea
    </label>

    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[2]" value="colddrinks"> Cold Drinks
    </label>

    <button type="submit"> Send </button>
  </form>
</div>

Controller

app.controller('UserController', function($scope){
 $scope.formData = {fullname : '', beverages : []};
});

Directive

app.directive('nsForm', function(){
    return {
        restrict : "A",
        scope: {
            formData : "=nsForm"
        },
        link : function(scope, iElem, iAttr) {
            $(iElem).on('submit', function(e) {
                e.preventDefault();

                console.log("FORM DATA");
                console.log(scope.formData);
            });
        }
    }
});

A little description

When I submit the form I get boolean TRUE for checked checkboxes, but instead I want the value inside the value attirbute. For instance, If I checked 'coffee' and 'Cold Drinks', I get beverages=[true,false,true], but what do I want is beverages['coffee','colddrink']. What is the AngularJS way of doing it? And Also. Is there any preferred way of submitting form in AngularJS instead of creating directives myself ?

Problem courtesy of: Lekhnath

Solution

I don't see any reason for the "name" attribute here. You need to use ng-click with a function to save your data - and that should be taken care of by a service. There's a lot you can do with angular...search the docs for anything you're doing (see checkboxes in the docs, for example).

Live demo here (click).

<div ng-controller="UserController">
Favourite Beverage :
<label>
  <input type="checkbox" ng-model="formData.beverages[0]" ng-true-value="coffee">Coffee
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[1]" ng-true-value="tea">Tea
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[2]" ng-true-value="colddrinks">Cold Drinks
</label>

<button ng-click="save()"> Send </button>
</div>

js:

var app = angular.module('myApp', []);

app.factory('myService', function($http) {
  var myService = {
    save: function(data) {
      //your ajax call here
      console.log(data);
    }
  };
  return myService;
});

app.controller('UserController', function($scope, myService) {
  $scope.formData = {};
  $scope.formData.beverages = [];
  $scope.save = function() {
    myService.save($scope.formData);
  };
});

Also, you should probably have all of your data (the drink values, for example) in your javascript rather than the html, then bind it to the page. Or in the database, then into js, then onto the page. That all depends on how dynamic your information needs to be - just be sure to think ahead.

Solution courtesy of: m59

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.