This is another simple angular ui select example that demonstrates the uses of ui-select and example using angularjs 1.4 framework. The ui-select is a popular dropdown that supports search, filter and multiple select features.
angular-ui-select contains a native AngularJS select directive based on Bootstrap, select2 and Selectize’s CSS. They are the following dependencies required:
- AngularJS (requires AngularJS 1.2.x or higher, tested with 1.5.3).
- Angular-Sanitize (the version should match your version of angular.js).
You can select one of the below-listed themes for the select box.
- Bootstrap
- Select2
- Selectize
Angular UI select Using dynamic Data by HTTP rest Call
I am not creating an http rest call to send data to client. I am assuming you have a rest call that will return options in JSON format.I have taken sample rest call that was returning below json data.
[{"id":"1","employee_name":"Albano","employee_salary":"222","employee_age":"38","profile_image":""},{"id":"2","employee_name":"Lemos","employee_salary":"89","employee_age":"50","profile_image":""},{"id":"3","employee_name":"Carla","employee_salary":"0","employee_age":"0","profile_image":""},{"id":"4","employee_name":"albano","employee_salary":"439","employee_age":"255","profile_image":""},{"id":"5","employee_name":"Paula","employee_salary":"50","employee_age":"53","profile_image":""},{"id":"6","employee_name":"test","employee_salary":"1111","employee_age":"111111","profile_image":""},{"id":"7","employee_name":"Junior-codigo","employee_salary":"137500","employee_age":"605","profile_image":""},{"id":"8","employee_name":"Rhona Davidson","employee_salary":"327900","employee_age":"55","profile_image":""},{"id":"9","employee_name":"ori","employee_salary":"1","employee_age":"25","profile_image":""},{"id":"10","employee_name":"Sonya \/\/\/Frostdddf","employee_salary":"2775675678","employee_age":"23","profile_image":""}]
As you can see above json data, We have arrays of object in json format data.
Step 1: We will include js and css required dependency into the head section of index.html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.8/select.js"></script> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.8/select.css">
Step 2: Added dependency into angular application module.
angular.module('TestApp', [
'ui.select',
'ngSanitize'
]);
Step 3: Created HTML UI using angular-ui directive.
<ui-select ng-model="emp.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a employee">
<ui-select-match placeholder="Select a employee in the list or search his name...">{{$select.selected.employee_name}}</ui-select-match>
<ui-select-choices repeat="emp in employees | filter: $select.search">
<div ng-bind-html="emp.employee_name | highlight: $select.search"></div>
<small>
age: {{emp.employee_age}}
</small>
</ui-select-choices>
</ui-select>
You can download source code and Demo from below link.
