Angular bind checkbox model to array

README.md

Angular bind checkbox model to array

Angular model formatter and parser pair that transforms a set of checkboxes to an array filled with arbitrary values.

Usage

<input type="checkbox" ng-model="ctrl.myModel" data-multi-select-value="::arrayValue">

multiSelectValue.js

/**
	* @ngdoc directive
	* @restrict E
	* @name nl.meylingmedia.multiselect:multiSelectValue
	* @module nl.meylingmedia.multiselect
	* @description
	* 	Angular model formatter and parser pair that transforms a set of checkboxes to
	* 	an array filled with arbitrary values.
	*
	* @usage
	*	<input type="checkbox" ng-model="ctrl.myModel" data-multi-select-value="::arrayValue">
	*/
angular.module('nl.meylingmedia.multiselect').directive('multiSelectValue', function() {
	return {
		restrict: 'A',
		require: 'ngModel',
		link: function(scope, element, attr, ngModel) {
			ngModel.$formatters.push(function(value) {
				var actualValue = scope.$eval(attr.multiSelectValue);
				return angular.isArray(value) && value.indexOf(actualValue) !== -1;
			});

			ngModel.$parsers.push(function(value) {
				var actualValue = scope.$eval(attr.multiSelectValue);

				if (!angular.isArray(ngModel.$modelValue)) {
					ngModel.$modelValue = [];
				}

				var index = ngModel.$modelValue.indexOf(actualValue);
				if (value === true && index === -1 ) {
					ngModel.$modelValue.push(actualValue);
				}
				else if (value === false || index !== -1) {
					ngModel.$modelValue.splice(index, 1);
				}

				return ngModel.$modelValue.slice();
			});
		}
	}
});