Angular Selector is a full native Angular directive, so you can use it without have to include any other library (except AngularJS, of course!).
Skinnable
You can define a template for the items in the dropdown list and a template for selected items.
RTL Support
To use it in with any kind of text direction.
Remote Resource Loading
Fetch your data from an external source and use it in your application.
From HTML <option> to JS object
Fill your <select> from server-side ad use data-attributes for every option you have,
then Angular Selector performs for you the conversion to a simple array of objects.
Custom Option Creation
You can create new options and add them to the list, just by hitting Enter.
Keyboard support
Move up and down the dropdown list using keyboard arrows.
Select highlighted item pressing Enter. Remove last selected item with Del key.
<selectselectormulti="true"model="myBrowsers"options="browsers"value-attr="value"></select><p>
Current value: <codeng-bind="myBrowsers|json"></code></p>
<!-- just DON'T add `value-attr` attribute! --><selectselectormodel="browser"options="browsers"label-attr="name"></select><p>
Current value: <codeng-bind="browser|json"></code></p>
<linkrel="stylesheet"href="https://rawgit.com/Arnoud-B/csscountrycodes/master/flags.css"><scripttype="text/ng-template"id="selector/demo/country">
<i class="flag" ng-class="option.code.toLowerCase()"></i>
{{option.name}}
</script><selectselectormulti="true"model="countries"remote="remoteConfig"remote-param="text"value-attr="code"view-item-template="'selector/demo/country'"dropdown-item-template="'selector/demo/country'"placeholder="Choose one or more countries..."></select><p>
Current value: <codeng-bind="countries|json"></code></p><pclass="small">
Icons:
<ahref="https://github.com/Arnoud-B/csscountrycodes"target="_blank">
Arnoud-B/csscountrycodes
</a></p>
<linkrel="stylesheet"href="https://rawgit.com/Arnoud-B/csscountrycodes/master/flags.css"><scripttype="text/ng-template"id="selector/demo/country">
<i class="flag" ng-class="option.code.toLowerCase()"></i>
{{option.name}}
</script><selectselectormodel="country"value-attr="code"debounce="200"remote="remote"remote-param="{{remoteParam}}"remote-validation="remoteValidation(value)"view-item-template="'selector/demo/country'"dropdown-item-template="'selector/demo/country'"placeholder="Choose one or more countries..."></select><p>
Current value: <codeng-bind="country|json"></code></p><pclass="small">
Icons:
<ahref="https://github.com/Arnoud-B/csscountrycodes"target="_blank">
Arnoud-B/csscountrycodes
</a></p>
var options = {
url: 'http://services.groupkt.com/country/',
method: 'GET',
cache: true,
transformResponse: function(data){
var result = angular.fromJson(data).RestResponse.result;
if (!angular.isArray(result)) result = [result];
return result.map(function(country){
return {
name: country.name,
code: country.alpha2_code
};
});
}
};
$scope.country = 'SV';
$scope.remote = angular.copy(options);
$scope.remote.url += 'search';
$scope.remoteParam = 'text';
$scope.remoteValidation = function(value){
var settings = angular.copy(options);
settings.url += 'get/iso2code/' + value;
return settings;
}
<divclass="btn-group"><buttonclass="btn btn-default"ng-click="countriesAPI.open()">
Open
</button><buttonclass="btn btn-default"ng-click="countriesAPI.focus()">
Focus
</button><buttonclass="btn btn-default"ng-click="countriesAPI.close()">
Close
</button><buttonclass="btn btn-default"ng-click="countriesAPI.fetch()">
Fetch
</button><buttonclass="btn btn-default"ng-click="countriesAPI.set('SXM')">
Set <code>SXM</code></button><buttonclass="btn btn-default"ng-click="countriesAPI.set('ITA')">
Set <code>ITA</code></button><buttonclass="btn btn-default"ng-click="countriesAPI.unset('ITA')">
Unset <code>ITA</code></button><buttonclass="btn btn-default"ng-click="countriesAPI.unset()">
Unset all
</button></div><selectselectormodel="countries"multi="true"api="countriesAPI"remote="remoteConfig"remote-param="text"label-attr="name"value-attr="alpha3_code"placeholder="Choose one or more countries..."></select><p>
Current value: <codeng-bind="countries|json"></code></p>
<selectselectormodel="myHobbies"multi="true"options="hobbies"value-attr="value"placeholder="Which are your hobbies? (type something that is not in the list)"create="createFunction(input)"></select><p>
Current value: <codeng-bind="myHobbies|json"></code></p>
<divng-show="!creation.active"><selectselectormodel="myHobbies"multi="true"options="hobbies"value-attr="value"placeholder="Which are your hobbies? (type something that is not in the list)"create="creation.show(input)"></select><p>
Current value: <codeng-bind="myHobbies|json"></code></p></div><formng-show="creation.active"ng-submit="creation.insert()"><divclass="form-group"><label>Value</label><inputng-model="creation.value"requiredautofocusplaceholder="value"class="form-control"></div><divclass="form-group"><label>Label</label><inputng-model="creation.label"requiredplaceholder="label"class="form-control"></div><buttontype="submit"class="btn btn-success">
Insert value!
</button><buttontype="button"class="btn btn-default"ng-click="creation.cancel()">
Cancel
</button></form>
