angular-multiple-select

angularMultipleSelect

A complete Angularjs directive for multiple select autocomplete

Getting started

Grab the sources with bower, npm or download from Github: [https://github.com/jagdeepsingh91/angularMultipleSelect/tree/v0.1/build]:

Sample View

https://cloud.githubusercontent.com/assets/13271120/11739891/b2d3e426-a014-11e5-9b57-a0d758f07bf0.png

Example

http://run.plnkr.co/plunks/XbHaZSiYqEzxjk6TuWyj/

Install "angular-multiple-select" from bower or npm and save it in your package.json or bower.json. For Example :

After installation include its html multiple-select.min.css AND multiple-select.min.js <script src="/bower_components/angular-multiple-select/build/multiple-select.min.js"></script> <link href="/bower_components/angular-multiple-select/build/multiple-select.min.css" rel="stylesheet"> in your html. Then,

Include multipleSelect module in your app: For example :

Now angularMultipleSelect module is injected in your module. You are ready to use it.

You can use it in 2 ways in your form : 1. If your options list is an array of objects, like :

Here, in "suggestions-arr" you have to provide the options list from which user can select multiple value. and, "object-property" is which you want to show to user. In above example "name" is the property which i want to show.

"ng-model" will give you an array of selected things. For Ex : If user selects Java & C++, then javascript ng-model will have selectedList = [ {id: 1, name : "Java"}, {id: 3, name : "C++"} ] 2. If your options list is an array of strings, like :

Here, in "suggestions-arr" you have to provide the options list from which user can select multiple value.

"ng-model" will give you an array of selected things. For Ex : If user selects Java & C++, then javascript ng-model will have selectedList = [ "Java", "C++" ]

  1. To make it required Field in a form
  1. Fetching options list from 3rd party api/url Part 1. If your Api return an array of strings like : javascript [ "Java", "C", "C++", "AngularJs", "JavaScript" ] Then in html no need to specify property in "object-property" attribute in directive html <multiple-autocomplete ng-model="skillsFromApi" api-url="{{apiPath}}" suggestions-arr=""> </multiple-autocomplete>

    Part 2. If your Api return an array of objects like : javascript [ {id: 1, name : "Java"}, {id: 2, name : "C"}, {id: 3, name : "C++"}, {id: 4, name : "AngularJs"}, {id: 5, name : "JavaScript"} ] Then in html you need to specify property in "object-property" attribute in directive Here in this case, you have to do like this : html <multiple-autocomplete ng-model="skillsFromApi" object-property="name" api-url="{{apiPath}}" suggestions-arr=""> </multiple-autocomplete>

For any suggestions, issues, Query, etc. Please feel free to let me know. Thanks :)

comments powered by Disqus
This page was last updated over 1 year ago.