Example & Demo of Bootstrap MultiSelect Using Angular Directive

This tutorial help to create an angular directive using Bootstrap MultiSelect. Bootstrap MultiSelect is used to create a beautiful selectable and searchable drop-down list using the HTML select element. You can create and use with group multiselect option as well for the categories select option.

I am using angular1 to create angularjs directive. I have taken some references from other available multiple services. I am sharing a simple and easy-to-implement angularjs multi-select option.

This angular js example is dependent of angular1,bootstrap 3 css, bootstrap 3 js and jquery libraries.

We will create the following files and participate in this angularjs multiselect tutorial,

• index.html : This file will contain bootstrap multislect HTML view and include all libs which are needed into this example.
• app.js : This file will use to create angular app and controller
• multiselect_directive.js : This file is used to create angular directive using bootstrap multiselect

I am assuming you have created d:/bootstrap_multiselect_angular application folder and keep above files into this folder.

Step 1: Added dependency libraries into head section of index.html file,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 	
 	
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="bootstrap-multiselect.min.js" type="text/javascript"></script>
<script src="app.js"></script>
<script src="multiselect_directive.js" type="text/javascript"></script>

I have included cdn path of jquery, bootstrap and angularjs.

Step 2: We have created multiselect_directive.js file and keep below code into this file,

// Code goes here

var app = angular.module('TestApp');

app.directive('multiSelect', function() {

  function link(scope, element) {
    var options = {
      enableClickableOptGroups: true,
      enableFiltering: true,
      buttonWidth: '100%',
      onChange: function() {
        //element.change();
      }
    };
    element.multiselect(options);
  }

  return {
    restrict: 'A',
    link: link
  };
});

app.config(['$provide', function($provide) {
  $provide.decorator('selectDirective', ['$delegate', function($delegate) {
    var directive = $delegate[0];

    directive.compile = function() {

      function post(scope, element, attrs, ctrls) {
        directive.link.post.apply(this, arguments);

        var ngModelController = ctrls[1];
        if (ngModelController && attrs.multiSelect !== null && angular.isDefined(attrs.multiSelect)) {
          originalRender = ngModelController.$render;
          ngModelController.$render = function() {
            originalRender();
            element.multiselect('refresh');
          };
        }
      }

      return {
        pre: directive.link.pre,
        post: post
      };
    };

    return $delegate;
  }]);
}]);

There are a lot of options available in the base bootstrap multiselect library, so we will pass options into options JSON object like we have passed above, for group select enableClickableOptGroups: true, for search enableFiltering: true, for button width buttonWidth: '100%' etc. You can add and remove option of bootstrap multiselect as per you requirement.

Step 3: We have created angular app and controller into app.js file and put below code into this file,

(function(window, angular, undefined){
	'use strict';
	angular.module('TestApp', [
	]);
	angular.module('TestApp').controller('testController', testController);
	function testController($scope){
	
		$scope.fields = {
		    "guid": "ddc4b945-c5cd-4ea0-8374-b00853a5d54c",
		    "isActive": true,
		    "balance": "$3,012.52",
		    "picture": "https://placehold.it/32x32",
		    "age": 27,
		    "eyeColor": "green",
		    "name": "Brooke Salas",
		    "gender": "female",
		    "company": "TROPOLI",
		    "email": "[email protected]",
		    "phone": "+1 (914) 411-3339",
		    "address": "498 Exeter Street, Neahkahnie, Mississippi, 8057",
		    "about": "Elit qui id minim in magna. Duis est laboris commodo dolore nostrud Lorem sunt incididunt cillum aliquip. Consequat et anim adipisicing quis incididunt reprehenderit fugiat adipisicing ut consectetur do. Aliqua adipisicing quis sint duis nostrud sint consectetur fugiat sint. Labore velit aliqua occaecat do nostrud sit eiusmod laborum proident. Irure duis sit dolore adipisicing laborum.\r\n",
		    "registered": "2015-04-29T09:54:48 -06:-30",
		    "latitude": 46.191052,
		    "longitude": -98.416315
		}
	}
})(window, window.angular);

Step 4: We will create HTML view to render angular bootstrap multiselect directive and display the selected value in index.html file.

<h1>Bootstrap Multiselect example Using Angular directive</h1>
	    <div class="col-sm-4">
	        <select id="scr_fields" class="multiselect" ng-model="selected" multiple="multiple" multi-select ng-options="name for (name, value) in fields">
	    	</select>
	    </div>
	    <div class="col-sm-6 alert alert-info">{{selected}}</div>

You can download source code and Demo from below link.