Angular Selector is a native AngularJS directive that transform a simple
<select> box into a full html select with typeahead.
Check out the examples page to learn more: http://indrimuska.github.io/angular-selector.
- No-jQuery Required 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
<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.
- Responsive Perfect for use in mobile environments.
- Just AngularJS!
Load stylesheet and scripts into your app:
<link href="angular-selector/dist/angular-selector.css" rel="stylesheet">
Add the dependency to your module:
var app = angular.module('MyApp', ['selector']);
Look at these.
Property: Two-way binding property that models the
String: Input name attribute.
Boolean: Enable/disable the select. Note the name is
disabled to avoid collisions with the HTML5
Boolean: Allows to select more than one value. Note the name is
multiple to avoid collisions with the HTML5 multiple attribute.
String: Optional placeholder text to display if input is empty.
Array: Set of options to display.If you don't use a custom template (
dropdownItemTemplate) and you don't change the default values of
labelAttr, each option in this array must contain a
label key and a
String: Name of the value key in options array. This also sets the type of result for the model: if you don't set this attribute (
null by default) the entire object option is returned, otherwise it will be returned only the selected property.
String: Name of the label key in options array.
String: Name of the
optgroup label key in options array. It allows to group items by the selected key. Items have to be already sorted to see the groups just one time.
Boolean: Two-way bindable attribute to set a Right-To-Left text direction.
Object: This object is equipped with the methods for interacting with the selector.
Function: Allows users to type the label of their own options and push them into the list. You can pass a function that returns the full format of the option, using
input as parameter, or set it to
true to let Angular Selector create an object with the default properties given by
Object: Configuration object to pass to the native
$http service (docs).
String: Name of the query key in the remote parameter object. You should use this parameter to perform server-side filtering.
Boolean: Two-way bindable attribute to see the remove button (cross icon).
String: Template URL of selected item(s).
String: Template URL of each item in the dropdown list.
String: Template URL of each group (header) in the dropdown list.
Copyright (c) 2015 Indri Muska. Licensed under the MIT license.