https://github.com/stefanovollono/angular-select
Angular Select is a responsive and customizable select for angular 1.x. A simple directive along with a configuration object and you’re ready to go.
https://github.com/stefanovollono/angular-select
angular angular-select angularjs options scss select
Last synced: 6 months ago
JSON representation
Angular Select is a responsive and customizable select for angular 1.x. A simple directive along with a configuration object and you’re ready to go.
- Host: GitHub
- URL: https://github.com/stefanovollono/angular-select
- Owner: StefanoVollono
- License: mit
- Created: 2017-06-01T12:03:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T22:13:15.000Z (almost 3 years ago)
- Last Synced: 2024-04-13T19:28:10.068Z (almost 2 years ago)
- Topics: angular, angular-select, angularjs, options, scss, select
- Language: JavaScript
- Homepage: https://stefanovollono.github.io/angular-select/
- Size: 2.49 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/StefanoVollono/angular-select)
# angular-select
Angular Select is a responsive and customizable select for angular 1.x. A simple directive along with a configuration object and you're ready to go. [Demo](https://stefanovollono.github.io/angular-select/)
## Installation with npm
`npm install angular-select-option --save`
## How to use:
### Method 1: import scripts in your html and the directive as a module dependency:
```html
```
```javascript
angular.module('myApp', ['angular-select']);
```
### Method 2: import all scripts from node_modules and use it as module dependency (see the demo folder):
```javascript
import angular from 'angular';
import angularSelect from 'angular-select-option/lib/angular-select';
angular.module('myApp', ['angular-select']);
```
## The CSS
You can choose between the scss or che css version.
Choosing SASS allow you to specify some graphic behaviour overriding the global variables in
angular-select.scss file
```css
// default settings
$max-width: none!default;
$select-height: 45px!default;
$header-color: #37474f!default;
$arrow-bg: #0080ff!default;
$arrow-fill: #ffffff!default;
$arrow-width: 32px!default;
$header-bg: #ffffff!default;
$options-bg: #fafafa!default;
$options-color: #37474f!default;
$options-shadow: 0 5px 10px -4px rgba(0, 0, 0, .36)!default;
```
## Custom Atribute
these are the custom attributes available
```javascript
scope: {
selectoptionName: "@", //name to display above the select
selectoptionModel: "=", //model to bind the selected value
selectoptionElements: "=", //list of the options
selectoptionCallback: "&?", //callback to be triggered on click
selectoptionRequired: "=?", //if the select is required e.g. inside a form
selectoptionOrderby: "@?" //order to display the elements
},
```
## Usage
A simple example available in /demo folder
```html
Required
Send
```
```javascript
// Form Model
$scope.formData = {};
// Countries Data
$scope.countries = {
title: 'Nation',
items : [
{label: 'France', value: 'FR'},
{label: 'England', value: 'UK'},
{label: 'Germany', value: 'DE'}
]
};
// Countries Callback
$scope.countriesCallback = function (index) {
$scope.callbackResult = index;
};
```
## How to run local npm scripts
```javascript
// Run local dev server on demo folder
npm run serve
// Start demo build process. Create demo folder inside dist.
npm run build:demo
// Export minified lib in UMD and ESM format inside dist folder.
npm run build:lib
// Serve build demo inside dist folder
npm run serve:build-demo
```