cp-select

A consistently styled cross-browser and keyboard friendly select component

Requirements

• Angular 1.3
• Lodash
• jQuery

Installation

1. Install through npm npm install --save cp-select
2. Make sure your angular app depends upon 'cp-select':

angular.module('app', ['cp-select']);

Usage

Markup:

<cp-select ng-model="model" collection="collection"></cp-select>

scope.model = {
    value: "Arizona",
    key: "AZ"
};
 
scope.collection = [{
    "value": "Alabama",
    "key": "AL"
}, {
    "value": "Alaska",
    "key": "AK"
}, {
    "value": "American Samoa",
    "key": "AS"
}, {
    "value": "Arizona",
    "key": "AZ"
}, {
    "value": "Arkansas",
    "key": "AR"
}];
 
// The collection object can also be an array of strings
scope.collection = [
    "Alabama",
    "Alaska",
    "American Samoa",
    "Arizona",
    "Arkansas",
];
 

Options

• key-model: Make the selected model to be only the key attribute of the selected item
• transparent
• append-text
• autosize-input: Make styling match autosize inputs
• allow-clear: show an 'x' icon next to selected value, allowing the user to clear the input

Demo

http://canopytax.github.io/cp-select/