Angular ui-select
ui-select is used to search for options in the dropdown. Earlier select2 was used which is now deprecated and instead ui-select is used.
Requirements
Make sure AngularJS version is above 1.2.
Using Node.js command prompt, open the project location. Install ui-select via bower using the following command
bower install angular-ui-select
Link the below two files to the project’s index.html page.
bower_components/angular-ui-select/dist/select.js
bower_components/angular-ui-select/dist/select.css
Other useful files that are to be linked to the index.html are as follows
Sanitize.js – <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js”></script>
Select2 theme – <link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css”>
Include ‘ui-select’ and ‘ng-sanitize’ in the application’s module
var app = angular.module(‘demo’,[‘ui-select’,‘ng-sanitize’]);
Implementation
In order to implement this select through search feature, three main directives are used.
ui-select is the main directive which is similar to the select tag in HTML
ui-select-choice directive is similar to option tag in HTML
ui-select-match directive is to display the selected value among the options
Various attributes are associated with each directive.
<ui-select ng-model=”modelName.selected” theme=”select2″>
<ui-select-match> {{$select.selected.propertyName}} </ui-select-match>
<ui-select-choices repeat=”i in propertyArray” | filters >
<div ng-bind-html=”i.propertyName | highlight: $select.search” > </div>
</ui-select-choices>
</ui-select>Avoid the following Errors
Error : Transclude not a function
Solution : Make sure the AngularJS version is above
Make sure all the script files links are placed first followed by the CSS file links. It is better to give AngularJS link the first position in order to avoid unexpected errors and odd UI design for dropdown.
Resources
