HTML Drop Down using Chosen and AngularJS

In This article I will let you know how to apply chosen jquery plugin with angularjs using angular directive, sometime we need to show search option on HTML select element due to more options data that time chosen and select2 comes in picture.Chosen and select2 plugin both are jquery plugin to convert normal HTML select box into long, unwieldy select boxes more user friendly.We have shared an article How to apply Select2 into HTML dropdown,

Here I am sharing simple step by step tutorial about applying chosen on select Box in angular application.I also shared source code as well as demo to show chosen with angular using angular directive.

There are following files and Library Used

  • jQuery and AngularJS Library : Base library to support other angular directive
  • Boostrap 3 : Used to create awesome HTML layout
  • chosen.angular.js : Use to create searchable HTML element in angular app using angular directive,You can download from here.
  • chosen-jquery.js : This jquery plugin file is base lib to create chosen angular directive.

You can also check other tutorial of angular,

Simple Example of Chosen Drop Down with AngularJS

Step 1: First we will include all necessary AngularJs and library files.We will keep all below files in head section of index.html file.

Select Code
1
2
3
4
5
6
7
8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="assets/chosen.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="app.js"></script>
    <link rel="image_src" href="/assets/css/chosen-sprite.png">
    <script src="assets/chosen.jquery.min.js"></script>
    <script src="assets/angular-chosen/angular-chosen.min.js"></script>

Step 2: We will create angular app for this sample and define dependencies(app.js).

Select Code
1
2
3
4
TestApp = angular.module('TestApp', ['TestApp.controllers','angular.chosen']);
  
  angular.module('TestApp.controllers', []).controller('testController', function($scope) {
  });

Step 3: We will create HTML select element and apply chosen directive and define all necessary parameters with in index.html.

Select Code
1
2
3
4
<select class="chosen-select form-control col-sm-3" id="form-field-select-3" data-placeholder="Choose a Employee..." ng-model="empName" chosen>
          <option value="">Select Employee</option>
          <option ng-repeat="emp in userList" value="{{emp.name}}">{{emp.name}}</option>
        </select>

HTML Dropdown Using AngularJS and Chosen

chosen with angularjs

Demo & Download Source Code Of Image Cropping with PHP and AJAX

  • Thanks your valuable appreciation.