https://github.com/airbr/ngchip-dialog-search

Angular 1.x/Angular Material module for searching/adding/filtering/saving md-chips from a md-dialog
https://github.com/airbr/ngchip-dialog-search

angular-directives angular-material angularjs dialog javascript md-chips ui-design

Last synced: 25 days ago
JSON representation

Angular 1.x/Angular Material module for searching/adding/filtering/saving md-chips from a md-dialog

• Host: GitHub
• URL: https://github.com/airbr/ngchip-dialog-search
• Owner: airbr
• Created: 2017-03-06T20:53:46.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-25T02:15:22.000Z (over 7 years ago)
• Last Synced: 2025-01-03T20:36:20.886Z (30 days ago)
• Topics: angular-directives, angular-material, angularjs, dialog, javascript, md-chips, ui-design
• Language: JavaScript
• Size: 21.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


# Get started

#### Local

1. Clone the repository `git clone https://github.com/airbr/ngchip-dialog-search.git`

2. Open `index.html`

	_TODO:_ Add instructions for local installation of dependencies. Currently using CDN's for the following dependencies:

	

	CSS:

	

	* Angular Material 1.1.3

	* Google Fonts Roboto

	

	JS:

	

	* AngularJS 1.6.2

	* Angular Route 1.6.2

	* Angular Animate 1.6.2

	* Angular Aria 1.6.2

	* Angular Messages 1.6.2

	* [SVG Assets Cache](https://github.com/angular/material/blob/master/docs/guides/CODEPEN.md)

	* Angular Material 1.1.3

### Summary / Background

> a piece of angularJS code aiming to combine the ngMaterial directives [`md-dialog`](https://material.angularjs.org/latest/api/directive/mdDialog), [`md-chips`](https://material.angularjs.org/latest/api/directive/mdChips) and [`md-autocomplete`](https://material.angularjs.org/latest/api/directive/mdAutocomplete) to create a reasonably re-usable and performant UI module with the ability to:

> 

  * Open a `md-dialog` that contains the following interface in its own scope:

  * The ability to input text to search over a JSON Array and present autocomplete suggestions, simultaneously filter visible `md-chips` in the view based on the same searchtext

  * Represent those array items as `md-chips` in the view with a simple label but also retain their association to the full JSON from the `ng-model` when those chips are selected. Also gives the ability to search/filter based on those non-visible JSON properties in the view, i.e. a 'soft' or 'fuzzy' search.

  * Select and add these `md-chips` to an array for submission either by selecting them onscreen or entering them from the input i.e. for a form as part of a potential sign-up process or other user interaction.

  	* Also ability to remove these chips by de-selecting them visually

  * Necessary CSS/Angular Logic applied to depict chips that have been selected/ avoid duplicates etc including:

   * Style selected chips with ng-class, requiring targeting a class from a grandparent selector since you cannot apply styles directly on md-chip-template

   * Show chips with these applied selected styles as they are being filtered in the search

  * Close the `md-dialog` and submit the choices you have made that are saved in a variable in JSON for handing off

  

#### Online

[Online Demo hosted on Codepen of commit `04ff4f0` / `v0.2`](https://codepen.io/airbridge/pen/mWrYxv)

![](https://i.imgur.com/OV0Zbwy.gif)