A complete Angularjs directive for multiple selection with suggestion list, like skills, locations etc.
npm install angular-multiple-selectjavascript
$scope.beforeSelectItem = function(item){
// perform operation on this item before selecting it.
}
`
`html
before-select-item="beforeSelectItem"
suggestions-arr="optionsList">
`
2. afterSelectItem : Listen for event before adding an item
`javascript
$scope.afterSelectItem = function(item){
// perform operation on this item after selecting it.
}
`
`html
after-select-item="afterSelectItem"
suggestions-arr="optionsList">
`
3. beforeRemoveItem : Listen for event before adding an item
`javascript
$scope.beforeRemoveItem = function(item){
// perform operation on this item before removing it.
}
`
`html
before-remove-item="beforeRemoveItem"
suggestions-arr="optionsList">
`
4. afterRemoveItem : Listen for event before adding an item
`javascript
$scope.afterRemoveItem = function(item){
// perform operation on this item after removing it.
}
`
`html
after-remove-item="afterRemoveItem"
suggestions-arr="optionsList">
`
#Getting started
Install "angular-multiple-select" from bower or npm and save it in your package.json or bower.json.
For Example :
`sh
$ npm install --save angular-multiple-select;
$ bower install --save angular-multiple-select
`
After installation include its
`html
multiple-select.min.css AND
multiple-select.min.js
`
in your html. Then,
Include multipleSelect module in your app:
For example :
`javascript
angular.module('yourModuleName', [
'multipleSelect'
]);
`
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 :
`javascript
$scope.optionsList = [
{id: 1, name : "Java"},
{id: 2, name : "C"},
{id: 3, name : "C++"},
{id: 4, name : "AngularJs"},
{id: 5, name : "JavaScript"}
];
`
`html
object-property="name"
suggestions-arr="optionsList">
`
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 :
`javascript
$scope.optionsList = [
"Java",
"C",
"C++",
"AngularJs",
"JavaScript"
];
`
`html
suggestions-arr="optionsList">
`
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++"
]
`
3. To make it required Field in a form
`html
`
4. Fetching options list from 3rd party api/url
You can specify "api-url-option" and you can process response before we capture it. Below is the Example :
`javascript
$scope.apiUrlOption = {
method : "GET",
responseInterceptor : function (response) {
/*
*
* Process response acc. to your requirement.
* After processing we are assuming "response.data" as "suggestionsArr".
*
/
}
};
`
Then in html no need to specify property in "object-property" attribute in directive
`html
api-url="{{apiPath}}"
suggestions-arr=""
api-url-option="apiUrlOption">
`
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
api-url="{{apiPath}}"
suggestions-arr="">
`
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
object-property="name"
api-url="{{apiPath}}"
suggestions-arr="">
``