Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pc035860/ngSelect
An AngularJS module that transforms any HTML element on the page to selectable components.
https://github.com/pc035860/ngSelect
Last synced: 4 months ago
JSON representation
An AngularJS module that transforms any HTML element on the page to selectable components.
- Host: GitHub
- URL: https://github.com/pc035860/ngSelect
- Owner: pc035860
- License: mit
- Created: 2013-07-20T04:24:52.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-03T17:26:20.000Z (almost 10 years ago)
- Last Synced: 2024-08-10T18:07:16.965Z (4 months ago)
- Language: CSS
- Homepage: http://pc035860.github.io/ngSelect/example/
- Size: 3.87 MB
- Stars: 72
- Watchers: 3
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngSelect
An AngularJS module that transforms any HTML element on the page to selectable components.
#### [Demo](http://plnkr.co/edit/4neUeA?p=preview)
## Requirements
AngularJS v1.0.1+
## Getting started
Include the ngSelect module with AngularJS script in your page.
```html
```
Add `ngSelect` to your app module's dependency.
```js
angular.module('myApp', ['ngSelect']);
```
## Install with Bower
The official bower package of AngularJS hasn't support unstable branch, hence for the current version of `ngSelect` package, no dependency is specified.
```sh
# install AngularJS (stable)
bower install angular
# or (unstable)
bower install PatternConsulting/bower-angular
# install ngSelect
bower install ngSelect
```
## Usage
### ng-select
Require directive: `ngModel` (means there must be an `ng-model` directive at the same element)
Type: `boolean`
Default: `undefined`
Enables selection logic for model in `ngModel`
[Live Example](http://pc035860.github.io/ngSelect/example/#/ng-select)
```html
selection:
![]()
```
### ng-select-option
Require directive: `^ng-select` (means there must be an `ng-select` in parent elements)
Type: `expression`
Default: `undefined`
Provides selection value for the model specified in `ng-select`.
Special properties are exposed on the local scope of each `ng-select-option` instance, can be used in the evaluation of `select-class`, `select-style`, `select-disabled` expressions.
* `$optIndex` - {number} - unique index of the option
* `$optValue` - {*} - value of the option
* `$optSelected` - {boolean} - whether the option is selected
* `$optDisabled` - {boolean} - whether the option is disabled
#### select-class (optional)
Require directive: `ng-select` or `ng-select-option`
Type: `expression`
Default: `undefined`
Provides the exact same functionality as ng-class, but with the additional local scope applied with `$optIndex`, `$optValue`, `$optSelected` varaibles to increase the usage flexibility. This optional directive is applicable to `ng-select` as global configuration and also applicable to `ng-select-option` as local configuration.
[Live Example](http://pc035860.github.io/ngSelect/example/#/select-class)
```html
selection: {{ selection }}
![]()
```
#### select-style (optional)
Require directive: `ng-select` or `ng-select-option`
Type: `expression`
Default: `undefined`
Provides the exact same functionality as ng-style, but with the additional local scope applied with `$optIndex`, `$optValue`, `$optSelected` varaibles to increase the usage flexibility. This optional directive is applicable to `ng-select` as global configuration and also applicable to `ng-select-option` as local configuration.
[Live Example](http://pc035860.github.io/ngSelect/example/#/select-style)
```html
selection: {{ selection }}
![]()
```
#### select-disabled (optional)
Require directive: `ng-select` or `ng-select-option`
Type: `expression`
Default: `undefined`
Disables the interactivity of options if the expression is evaluated to be `true`. The evaluation has the access to the additional local scope with `$optIndex`, `$optValue`, `$optSelected` varaibles to increase the usage flexibility. This optional directive is applicable to `ng-select` as global configuration and also applicable to `ng-select-option` as local configuration.
[Live Example](http://pc035860.github.io/ngSelect/example/#/select-disabled)
```html
selection: {{ selection }}
disable
enable
![]()
```
#### select-multiple (optional)
Require directive: `ng-select`
Type: `boolean`
Default: `false`
Enables `ng-select` to support multiple selection, of which the model binded will be an array. This optional directive is only applicable to `ng-select`.
[Live Example](http://pc035860.github.io/ngSelect/example/#/select-multiple)
```html
selection: {{ selection }}
![]()
```
#### Example usage with ngModel validations
[Live Example](http://pc035860.github.io/ngSelect/example/#/with-ngModel-validation)
```html
selection: {{ selection }}
![]()
```
Custom validator source code: (see [Angular forms manual](http://docs.angularjs.org/guide/forms) for explanations.)
```javascript
angular.module('exampleApp').directive('exampleOdd', function(){
return {
require: 'ngModel',
link: function(scope, el, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.push(function(viewValue) {
if (parseInt(viewValue) % 2 == 0) {
ngModelCtrl.$setValidity('exampleOdd', false);
return undefined;
} else {
ngModelCtrl.$setValidity('exampleOdd', true);
return viewValue;
}
});
ngModelCtrl.$formatters.push(function(modelValue) {
if (modelValue % 2 == 0) {
ngModelCtrl.$setValidity('exampleOdd', false);
return undefined;
} else {
ngModelCtrl.$setValidity('exampleOdd', true);
return modelValue;
}
});
}
}
});
```
## Note
1. Duplicate values in `ng-select-option` will cause strange behavior.
## More demos
#### [Dynamic-valued option](http://plnkr.co/edit/0SEzEQ?p=preview)
`ng-select-option` values can be changed dynamically, and stay binded with `ng-select` model. Try it by selecting the `Other` option in the demo and enter something in the text input.
#### [Angular-highlightjs demo (feat. ngSelect)](http://plnkr.co/edit/OPxzDu?p=preview)
Super easy tab implementation with `ngSelect`.