Live Demo - acute-select for AngularJS

By John O'Connor.

acute-select is a dropdown select component for AngularJS, with no dependencies other than Angular itself.  It has a range of configuration options and a syntax akin to Angular's standard select directive.

Source code on github.

Basic select with filtering

Colour selected: {{selectedColour.name}}

<ac-select ac-model="selectedColour" ac-options="c.name for c in colours" 
    ac-change="colourChanged(value)"></ac-select>
 
$scope.selectedColour = $scope.colours[2]; // red.

$scope.colourChanged = function (value) {
    var colourName = value ? value.name : "none";
    $scope.message = "ac-change event fired for colour. New colour: " + colourName;
    $scope.$digest();
};

$scope.colours = [
    { name: 'black', id: 0 },
    { name: 'white', id: 1 },
    { name: 'red', id: 2 },
    ...

Loading data when the dropdown opens

State selected: {{stateInfo}}

<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in getAllStates()" 
        ac-settings="{ loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select>

Here, the parentheses on "getAllStates()" tell the ac-select directive to call a function to get the data for the dropdown.
Note that the ac-change function must be specified with a parameter called "value". 

$scope.getAllStates = function (callback) {
    callback($scope.allStates);
};

$scope.stateSelected = function (state) {
    $scope.stateInfo = state.name + " (" + state.id + ")";
}

$scope.allStates = [
    { "name": "Alabama", "id": "AL" },
    { "name": "Alaska", "id": "AK" },
    ...

ac-select passes a callback function to accept the data, so it can be read asynchronously if required.

Combo Mode

I.e. a combined text box and dropdown.

State selected: {{stateInfo}}

<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in getAllStates()" 
        ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select>

Combo mode is enabled by including "comboMode: true" in the ac-settings attribute.

 
$scope.getAllStates = function (callback) {
    callback($scope.allStates);
};

$scope.stateSelected = function (state) {
    $scope.stateInfo = state.name + " (" + state.id + ")";
}

$scope.allStates = [
    { "name": "Alabama", "id": "AL" },
    { "name": "Alaska", "id": "AK" },
    ...

ac-select passes a callback function to accept the data, so it can be read asynchronously if required.

See github README for a full list of settings.

John O'Connor