# md-chips-select

> Material design md-chips with multiple select menu

Latest version **1.0.2** (published 2016-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install md-chips-select
pnpm add md-chips-select
yarn add md-chips-select
bun add md-chips-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-11-22 |
| First published | 2015-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+14 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Nate Cheng |
| Maintainers | boo0330 |
| Keywords | md-chips, md-chip-select, material design, angular |

## Links

- npm: https://www.npmjs.com/package/md-chips-select
- Repository: https://github.com/boo0330/md-chips-select
- Homepage: https://github.com/boo0330/md-chips-select#readme
- Issues: https://github.com/boo0330/md-chips-select/issues
- npm.io page: https://npm.io/package/md-chips-select

## Dependencies (2)

- [angular](https://npm.io/package/angular.md) ~1.4.3
- [angular-animate](https://npm.io/package/angular-animate.md) ~1.4.3

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2016-11-22
- 1.0.1 — 2016-10-25
- 1.0.0 — 2015-08-12
- 0.0.9 — 2015-07-28
- 0.0.8 — 2015-07-28

## README

![Bower version](http://img.shields.io/bower/v/bootstrap.svg)
![npm version](http://img.shields.io/npm/v/npm.svg)

The Angularjs module - Learn from [Angular Material](https://material.angularjs.org/latest/#/), and add a multi-select menu to md-chips. <b>[Demo](http://codepen.io/boo0330/pen/EjOWgg)</b> in Codepen

<img src="http://i359.photobucket.com/albums/oo37/Nate_Cheng/screenshot_zpshcobe0ki.png" width="70%">


<h3>Prerequisites:</h3> angular.js, angular-animate.js

You can install the package
via npm
```shell
npm install md-chips-select
```
or via bower
```shell
bower install md-chips-select
```

Include the md-chips-select.js and md-chips-select.css in the HTML file

<h4>In HTML:</h4>
```html
<md-chips-select ng-model="selectedItems" select-items="listItems" main-title="name"><md-chips-select>
```
<b>ng-model (required)</b>:  The array to store the selected items<br>
<b>select-items (required)</b>: The array of the items in the select list<br>
<b>main-title (optional)</b>: The attributes seperated by space. It will combine all value of the attributes as the title of the list item.  If the main-title is not given, there must be one attibute named "title" in the select-items array  
<p>
  Ex: main-title = "name id"  
  It will combine the value of the attribute "name" and "id" (See the example below)
</p>
<h4>In javascript:</h4>

Inject the modules "ngAnimate" & "md.chips.select" when you initialize the app.   
Ex: 

```javascript
angular.module("yourApp", ['ngAnimate', 'md.chips.select']);   
```
Add an array for ngModel (selected) in your controller   


Ex:  
```javascript
$scope.selectedItems = []
```
Add an array for select-items

Ex:  
```javascript
$scope.listItems = [{    
      name: "Mini Cooper",    
      id: 0     
    }, {      
      name: "Lexus IS250",      
      id: 1      
    }, {      
      name: "Ford F150",     
      id: 2   
    }, {   
      name: "Toyota Prius",   
      id: 3   
    }];
```

---
_Source: https://npm.io/package/md-chips-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
