Dropdown List Component for AngularJS
13 people use it
Author: 8f50817b1057908c48bdaa1f708fc141? john-oc


acute-select is a dropdown select component for AngularJS, with no external dependencies other than Angular itself.

Live Demo


  • Search box
  • Load on demand
  • Paging
  • Combo Mode
  • Keyboard navigation (requires AngularJS 1.2)
  • Syntax like angular's select


As you can see, this is very similar to the way the angular select directive works. In the above example colours can be replaced with a function colours() to load the data either when the dropdown is created, when it is first opened, or when search text is typed.


Default values:-

Note:- if both loadOnCreate and loadOnOpen are false, the list will only be populated when search text is entered.

Settings are specified using the ac-settings attribute.

Load on demand

In this example, when the user opens the dropdown, the ac-select directive calls the getStates function. It passes in a callback function for the app script to return the data. As with a standard angular select, the data can be an array of objects, or simply an array of strings.



Combo Mode

As an alternative to the separate search box, acute-select can also act as a combined textbox and dropdown list. If the allowCustomText option is set, this will allow a user to enter text that is not in the list.

See the demo page for an example.

ac-key attribute

The ac-key attribute allows you to specify a property name which will be used to match the ac-model object against the data array.

One shortcoming of the standard angular select directive is that when bound to an array of objects, the initial model value must be one of those objects in order for it to be initially selected. An object with the same properties and values is not sufficient. This can be awkward when the current value is delivered to the client separately from the array of values for the list.

E.g. consider the following example, using the same list of US states shown above:-

Then suppose we define a standard select as follows:-

You would expect "Alaska" to be initially selected, but this won't happen, because currentState isn't the same copy of the Alaska object as the one in the array. There is a workaround, which is to convert the array of states to a single object, with the ids as keys, then use the select directives (key, value) syntax, but it's not very intuitive.

With the acute select directive you can avoid this problem altogether by simply setting ac-key to 'id':-

Global settings

If required, settings can be updated for all instances on a page, by using the acuteSelectService in the application "run" function, as in this example:-

John O'Connor

comments powered by Disqus
This page was last updated almost 5 years ago.