# angular-selector-on-steroids > [![NPM version](http://img.shields.io/npm/v/angular-selector-on-steroids.svg?style=flat)](https://www.npmjs.com/package/angular-selector-on-steroids) [![NPM downloads](http://img.shields.io/npm/dm/angular-selector-on-steroids.svg?style=flat)](https://www. Latest version **14.5.0** (published 2018-03-14) · ISC license · 0 weekly downloads ## Install ```sh npm install angular-selector-on-steroids pnpm add angular-selector-on-steroids yarn add angular-selector-on-steroids bun add angular-selector-on-steroids ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 14.5.0 | | Published | 2018-03-14 | | First published | 2017-10-23 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 14 | | Unpacked size | 640.9 KB | | Known vulnerabilities | 0 (+14 in 2 direct dependencies) | | Install scripts | no | | Author | jkodu | | Maintainers | jkodu | ## Links - npm: https://www.npmjs.com/package/angular-selector-on-steroids - npm.io page: https://npm.io/package/angular-selector-on-steroids ## Dependencies (14) - [rxjs](https://npm.io/package/rxjs.md) ^5.4.3 - [hyperx](https://npm.io/package/hyperx.md) ^2.3.1 - [nanoid](https://npm.io/package/nanoid.md) ^0.2.0 - [angular](https://npm.io/package/angular.md) ^1.6.6 - [css-loader](https://npm.io/package/css-loader.md) ^0.28.7 - [virtual-dom](https://npm.io/package/virtual-dom.md) ^2.1.1 - [html2hscript](https://npm.io/package/html2hscript.md) ^2.0.1 - [postcss-calc](https://npm.io/package/postcss-calc.md) ^6.0.0 - [css-variables](https://npm.io/package/css-variables.md) ^0.1.4 - [postcss-import](https://npm.io/package/postcss-import.md) ^10.0.0 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.0.5 - [postcss-nested](https://npm.io/package/postcss-nested.md) ^2.0.2 - [postcss-custom-media](https://npm.io/package/postcss-custom-media.md) ^6.0.0 - [postcss-css-variables](https://npm.io/package/postcss-css-variables.md) ^0.8.0 ## Recent versions - 14.5.0 (latest) — 2018-03-14 - 14.4.0 — 2018-03-09 - 14.3.0 — 2018-03-09 - 13.2.1 — 2018-03-08 - 12.1.1 — 2018-03-08 - 14.2.0 — 2017-12-19 - 14.1.0 — 2017-12-19 - 14.0.0 — 2017-12-19 - 13.2.0 — 2017-12-01 - 13.1.0 — 2017-12-01 - 13.0.0 — 2017-11-28 - 12.9.0 — 2017-11-27 - 12.8.0 — 2017-11-27 - 12.7.0 — 2017-11-27 - 12.6.0 — 2017-11-27 - … 21 more at https://npm.io/package/angular-selector-on-steroids/versions ## README # angular-selector-on-steroids [![NPM version](http://img.shields.io/npm/v/angular-selector-on-steroids.svg?style=flat)](https://www.npmjs.com/package/angular-selector-on-steroids) [![NPM downloads](http://img.shields.io/npm/dm/angular-selector-on-steroids.svg?style=flat)](https://www.npmjs.com/package/angular-selector-on-steroids) [![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) *angular-selector-on-steroids* is a native AngularJS (1.6.x) directive that transforms a simple ` ``` ### Options/ Configuration Parameter | Type | Default | Description ---|---|---|--- steroids | `Boolean` | `false` | Enable/disable the get performance boost in rendering and data marshalling. remoteCancelPendingXhr | `Boolean` | `false` | Enable/disable pending request cancellation, on new XHR requests. model | `Property` | | Two-way binding property that models the `select` view. name | `String` | | Input name attribute. disable | `Boolean` | `false` | Enable/disable the select. Note the name is `disable` not `disabled` to avoid collisions with the HTML5 disabled attribute. disableSearch | `Boolean` | `false` | Enable/disable the search input field. require | `Boolean` | `false` | Sets required validation. Note the name is `require` not `required` to avoid collisions with the HTML5 required attribute. multi | `Boolean` | `false` | Allows to select more than one value. Note the name is `multi` not `multiple` to avoid collisions with the HTML5 multiple attribute. limit | `Integer` | `Infinity` | Maximum number of selectable items when `multi` is `true`. placeholder | `String` | | Optional placeholder text to display if input is empty. options | `Array` | `[]` | Set of options to display.

Each object must contain a `label` key and a `value` key, otherwise you need to use a custom template (`viewItemTemplate` and `dropdownItemTemplate`) or change the default values of `valueAttr` and `labelAttr` properties. valueAttr | `String` | `null` | Name of the value key in options array. This also sets the type of result for the model: if you don't set this attribute (`null` by default) the entire object option is returned, otherwise it will be returned only the selected property. labelAttr | `String` | `"label"` | Name of the label key in options array. groupAttr | `String` | `"group"` | Name of the `optgroup` label key in options array. It allows to group items by the selected key. Items have to be already sorted to see the groups just one time. debounce | `Integer` | `0` | Debounce model update value in milliseconds. rtl | `Boolean` | `false` | Two-way bindable attribute to set Right-To-Left text direction. api | `Object` | `{}` | This object is equipped with the methods for interacting with the selector. Check out the ["APIs" example](http://indrimuska.github.io/angular-selector/). create | `Boolean` or `Function` or `Promise` | | Allows users to type the label of their own options and push them into the list. You can pass a function that returns the full format of the option, using `input` as parameter, a `Promise`, or set it to `true` to let Angular Selector create an object with the default properties given by `valueAttr` and `labelAttr`. Check out ["Create custom options"](http://indrimuska.github.io/angular-selector/) and ["Create custom options (using `Promise`)"](http://indrimuska.github.io/angular-selector/) examples. change | `Function` | | Callback fired every time the selected values change. It provides two parameters: `newValue` and `oldValue`. remote | `Object` or `Promise` | 
{
  method: 'GET',
  cache: true,
  params: {}
}
| You can use remote data fetching with the native `$http` service or with your own custom service. In the first case this parameter must be the configuration object to pass to the native `$http` service ([docs](https://docs.angularjs.org/api/ng/service/$http#usage)). In the second case, `remote` is a function that returns a Promise object. remoteParam | `String` | `"q"` | If `remote` attribute is used with the native `$http` service, this parameter is the name of the query key in the `params` object. You should use this to perform server-side filtering. remoteValidation | `Object` or `Promise` | 
{
  method: 'GET',
  cache: true,
  params: {}
}
| This should be used to perform validation after a "manual" update of the model. It has the same structure of the `remote` property, check out ["Remote fetching and validation"](http://indrimuska.github.io/angular-selector/) example. remoteValidationParam | `String` | `"value"` | If `remoteValidation` attribute is used with the native `$http` service, this parameter is the name of the query key in the `params` object. removeButton | `Boolean` | `true` | Two-way bindable attribute to show the remove button (cross icon). softDelete | `Boolean` | `false` | If `disableSearch` is `false`, restores the last selected input text (using `labelAttr` attribute) after pressing Backspace. closeAfterSelection | `Boolean` | `false` | Close dropdown after selecting an item. viewItemTemplate | `String` | `"selector/item-default.html"` | Template URL for the selected item(s). dropdownItemTemplate | `String` | `"selector/item-default.html"` | Template URL for each item in the dropdown list. dropdownCreateTemplate | `String` | `"selector/item-create.html"` | Template URL for the dropdown element for the new items. dropdownGroupTemplate | `String` | `"selector/group-default.html"` | Template URL for each group (header) in the dropdown list. ### Roadmap & Why there is no need to PR to original project - The code has matured to newer standards of Angular and Javascript, and hence there is no reason to update the older component. - The plan is to abstract the selector logic to pure Js and provide a bolt-on AngularJs and Angular component. ### Contributions - PR's are welcome. - Please raise issues if any. ### License Licensed under the MIT license. ### Local Development - npm install - npm run build-prod - generates a dist directory ready for publishing. - npm run build - generates the demo/dist directory for local development (no watch). - npm run dev - builds and watches both source and sandbox directory for local development. - npm run serve - boots up a http-server and serves the demo directory. --- _Source: https://npm.io/package/angular-selector-on-steroids · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._