myforce / angularjs-dropdown-multiselect

AngularJS Dropdown Multiselect

Deprecated: use the orginal repo that is back to being actively maintained

AngularJS Dropdown Multiselect

This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

Features

• Based on Bootstrap's dropdown.
• jQuery is not necessary.
• Seperated your data and the selection data. no modification to the data made.
• Built-in search.
• Complete control on the selected items model to fit it to your requirements.
• Two view options: normal list and checkboxes.
• Pre-selected values.
• Limit selection count.
• Grouping items by property.
• Callback events.
• Translation texts.
• Scrollable list (useful for big lists)

Demo

http://myforce.github.io/angularjs-dropdown-multiselect/

Dependencies

• required: AngularJS >= 1.2, Bootstrap >= 3.0

• Make sure to add the dependencies before the directive's js file.

• Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file

Install

1. Download the files

   1. Using bower:

      Just run bower install myforce-angularjs-dropdown-multiselect

   2. Manually: You can download the .js file directly or clone this repository

2. Include the file in your app
   • <script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.
   • You can also use the minfined version (angularjs-dropdown-multiselect.min.js).
3. Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

Usage and Documentation

See the documentation and examples in the GitHub pages: http://myforce.github.io/angularjs-dropdown-multiselect/

angularjs-dropdown-multiselect's Issues

closeOnDeselect is now working when UnSelectAll options?

Hi we want to close the filter drop down automatically when the user select the options of UnSelectAll..

selectionLimit: 1 & Group Items By Property

Greetings,

I noticed that when using "selectionLimit: 1" with "Group Items By Property" and "Smart Button Text," the user MUST de-select a previously selected option before he/she can select another option. This is not very user-friendly.
BTW, this does not occur when we do not use a "Group Items By Property" list.

HTML:

JS:
$scope.answerCategoryModel = [];
$scope.answerCategoryData = [
{id: 1, label: "Custom", category: '1L'},
{id: 4, label: "Country", category: '1L'},
{id: 5, label: "State", category: '1L'},
{id: 6, label: "Country/State", category: '1L'},
{id: 7, label: "US Dollars Amount", category: '2N'},
{id: 8, label: "Percentage", category: '2N'},
{id: 10, label: "Short Text", category: '3T'},
{id: 11, label: "Long Text", category: '3T'},
{id: 12, label: "8 Digit Date", category: '4D'}];
$scope.answerCategorySettings = {
showCheckAll: false,
showUncheckAll: false,
dynamicTitle: true,
styleActive: true,
scrollable: true,
scrollableHeight: '300px',
smartButtonMaxItems: 8,
keyboardControls: true,
enableSearch: true,
selectionLimit: 1,
groupByTextProvider: function(groupValue) {
if (groupValue === '1L') {
return 'List';
} else if (groupValue === '2N') {
return 'Number';
} else if (groupValue === '3T') {
return 'Text';
} else {
return 'Date';
}
}
};

Single select is not allowed when custom Prop is set.

Hi,
I have an issue with customProps and single select.
I cant choose any selection when any Prop - idProp, displayProp is set.
Egz:

$scope.Options = [ {number: 1, value: "David"}, {number: 2, value: "Jhon"}, {number: 3, value: "Danny"} ]
$scope.Model = {};
$scope.Settings = {
    selectionLimit: 1,
    displayProp: 'value',
    idProp: 'number'
};

////

<div ng-dropdown-multiselect="" options="Options " selected-model="Model " extra-settings="Settings ">

search-filter is not bidirectional

The variable set with the search-filter attribute does not get updated when the user enters a query.

Bidirectional propagation is practical when using an external controller that can amend the options on demand (eg. public transport station selection -- only contains the user's starred locations until they start entering a station name, whereupon a remote query is started).

The original dotansimha version had the binding bidirectional, and a look at the code indicates that it is still kind-of intended (searchFilter: '=?',). A git-bisect shows that the problems started at f9a20bd, yet I have no idea how that change could have affected the binding.

Please consider re-adding this feature.

not found with bower

When i do bower install I get :
bower ENOTFOUND Package myforce-angularjs-dropdown-multiselect not found

Add watch to value of selected-model ?

Hello,

I would like to put a watch on the value of the selected-model in your example. For some reason the watch never fires when I change the selection in the multiselect. Is it possible to do this? Thanks

   <div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"> </div> 

   $scope.example1model = {}; 
   $scope.example1data = [{ id: 1, label: "David" }, { id: 2, label: "Jhon" }, { id: 3, label: "Danny" }];

   $scope.$watch("example1model", function (newValue, oldValue) {
         console.log(newValue);
   }); 

wrapper (.btn-group) does not have class .open

If dropdown is open, we should add class to the wrapper (.btn)

var template = '<div class="multiselect-parent btn-group dropdown-multiselect" ng-class="{open: open}">';

Custom Options

Is there a way to add my own options (along with Check All and Uncheck All)?

I'm using these as filters and having a button to remove the textbox -- i.e. remove filter -- would be awesome.

Thanks!

Update options in runtime

I managed to populate a dropdown using a predefined array of options like the sample code in oficial page, like this:

// HTML
<div ng-dropdown-multiselect="" options="example11data" selected-model="example11model" extra-settings="example11settings" group-by="gender"></div>

// JavaScript $scope.selectedPeople = [];
$scope.examplePeople = [
{id: 1, label: "David", gender: 'M'},
{id: 2, label: "Jhon", gender: 'M'},
{id: 3, label: "Lisa", gender: 'F'},
{id: 4, label: "Nicole", gender: 'F'},
{id: 5, label: "Danny", gender: 'M'}
];

Then I have a button which loads some data from my api, and I'd like to update the dropdown options, based on this data. So I did something like this:

        // Inside some controller method, called on button click....
        myService.getData()
        .then(function (data) {

            $scope.examplePeople = data; // Updating the existing....

            console.log($scope.examplePeople); // Check if the array has nwe items come from api

        });

I expected the options to be updated, since Angular is two-way binding, instead it keeps the old options. Am I missing something, or do I need to call something explicitly to reload the dropdown options?

Many thanks, awesome work done by you!!!

send selected id to controller

how i can use onItemSelect method for send id to controller ?

Use array of strings for options instead of array of objects?

See title. I would like to just use a simple string array but am not seeing how in the documentation. Is this possible? I do not have Ids and would over complicate things.

This:
scope.options= ["David", "Jhon", "Danny"];
Instead of this:
scope.options= [{ id: 1, label: "David" }, { id: 2, label: "Jhon" }, { id: 3, label: "Danny" }];

Thanks!

How to simulate ngChange

Hi,

This directive uses selectedModel instead of standard ngModel. This why ngChange dosn't work. I need to simulate somehow ngChange. I've assigned the same function to onItemSelect, onItemDeselect, onSelectAll and onDeselectAll. But when I click "Select all" onSelectAll event is triggered and also onItemSelect (in the same number as number of options).

So for example, when I want to reload table after select all items, reload method is executed more then once.

Is it any option to prevent trigger onItemSelect when user clicks "Select all" button? Or is any other possibility to trigger some event when just selectedModel has been changed by dropdown-multiselect directive?

Keyboard Controls not Working

Hello. The keyboard controls are not working in the demo anymore. I remember choosing to work with your fork over the original one because of this. Any idea why this is happening?

Disable angularjs-dropdown-multiselect ng-disabled

ng-disabled is not working

Multiple directives [ngDropdownMultiselect, ngDropdownMultiselect] asking for new/isolated scope on

Hi There,
I am using AngularJS v1.4.6
when i use angularjs-dropdown-multiselect i'm getting bellow error

Error: [$compile:multidir] Multiple directives [ngDropdownMultiselect, ngDropdownMultiselect] asking for new/isolated scope on:

can anyone help me ..?

event.srcElement non-standard

Functions keyDownLink and keyDownSearchDefault relies on event.srcElement property which is non-standard and causes JS errors. event.target should be used here.

https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

Disabled options not working

Hello,

I would like to know how to use a filter or the disabled option because I have to deactivate the items once added in my table but the option does not work.
I tried on jsfiddle and I have the same problem.

https://jsfiddle.net/22et6sao/1429/

If someone can help me, it's part of a professional project
Thanks !

Code is ignoring settings

I have the js:
$scope.example7settings = { "externalIdProp": '' };

and the HTML:
<div ng-dropdown-multiselect="" options="example7data" selected-model="example7model" extra-settings="example7settings"></div>

But when I run the code and display {example7model}} I get:
[{"id":1}]

If I debug the code and go to the function
`$scope.setSelectedItem = function(id, dontRemove, fireSelectionChange) {
var findObj = getFindObj(id);
var finalObj = null;

                if ($scope.settings.externalIdProp === '') {
                    finalObj = find($scope.options, findObj);
                } else {
                    finalObj = findObj;
                }`

I can see that $scope.settings.externalIdProp is now 'Id' again. So somewhere it seems to be setting the settings back to the default. I've not tested them all, but I also saw this same issue in displayProp, idProp, scrollableHeight and scrollable

Warning while install by bower

When I install the package by running this command:
bower install myforce-angularjs-dropdown-multiselect -D
I saw these warnings:

bower invalid-meta  The "main" field cannot contain minified files
bower mismatch      Version declared in the json (1.0.1) is different than the resolved one (1.9.1)

More info:

node -v
v4.2.6
npm -v
3.5.2
bower -v
1.7.9

Bring the selected option to top of list or a group the list based on selected and unselected options

Hi

Can you please include a setting to bring the selected option to top of list or create grouping based on selected and unselected options?

Thanks,
Adhaar

Cannot read property 'parentNode' of undefined

Error as follow when I used search box to type
But value is selected and getting output also.
Error Message:
angular.min.js:117 TypeError: Cannot read property 'parentNode' of undefined
at m.$scope.keyDownSearchDefault (angularjs-dropdown-multiselect.min.js:1)
at fn (eval at compile (angular.min.js:231), :4:427)
at b (angular.min.js:126)
at e (angular.min.js:274)
at m.$eval (angular.min.js:145)
at m.$apply (angular.min.js:145)
at HTMLInputElement. (angular.min.js:274)
at HTMLInputElement.dispatch (jquery.js:4618)
at HTMLInputElement.elemData.handle (jquery.js:4302)(anonymous function) @ angular.min.js:117(anonymous function) @ angular.min.js:90$apply @ angular.min.js:145(anonymous function) @ angular.min.js:274dispatch @ jquery.js:4618elemData.handle @ jquery.js:4302

Is there any option to select the dropdown list using tab key in keyboard ???

Hi ,

Need to know , how to open the multi-select drop down using tab key instead of space bar and enter key.

Advance thanks for ur help :)

Inherit width of container

Great module. I can't seem to make the select button inherit the width of the containing bootstrap

. I tried the stylesheets but no luck. Where could I adjust the width to be 100% of a container?

Demo page not working

It's me or the demo page is not working ?
http://myforce.github.io/angularjs-dropdown-multiselect/

Console log
Failed to load resource: the server responded with a status of 404 (Not Found)

https://rawgit.com/pc035860/angular-highlightjs/master/angular-highlightjs.js Failed to load resource: the server responded with a status of 500 (Internal Server Error)

angular.js:3809 Uncaught Error: [$injector:modulerr] Failed to instantiate module exampleApp due to:
Error: [$injector:modulerr] Failed to instantiate module hljs due to:
Error: [$injector:nomod] Module 'hljs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

When selectedModel is null, AngularJS goes full CPU with console log filled with $digest iterations reached

The issue happens when the property selected-model is null, then AngularJS goes into an infinite loop with the console log filled with 10 $digest iteration reached.
The error seems to be related to this

Cannot read property 'length' of undefined

You might ask, but why do you have a null value on the seletected-model anyway?
Simply because my form is a complex object which sometime doesn't have all properties, that is 1 of these properties that isn't always filled. I just hide the property when it's not filled. Basically something like

selected-model="vm.template.notifications.recipients"

In my case, the vm.template object doesn't always have notifications and recipients as well and when it doesn't, this thing just go crazy with an infinite loop.

For now, to counter this problem, I have to declare a fake variables vm.recipients = { }; and then when filled, I have to re-put it inside my complex object vm.template.notifications.recipients = vm.recipients which are extra steps.

P.S. What's happening with that other fork of GatoNinja? I would rather use yours, since you have all the demo and you support it well. But now I'm confused in which one to send my issue.

Configurable Templates

It would be quite helpful to make the templates configurable by putting them in template-cache.

This would make configuration settings like the feature implemented in #17 obsolete.

Users of the directive wouldn't need to fork the library to implement custom style rules or additional functionality. They could just change the template and extend additional functionality via custom directives.

This would also centralize the development effort. This library has a significant amout of forks some of them only change the template, e.g.

https://github.com/ale-batt/angularjs-dropdown-multiselect/commit/9e1d4d5a0c5b02021aa546be300ef2d52748bc1d the author prefers font-awesome over glyphicons

An example for using template-cache for templating of directives can be found in the https://github.com/angular-ui/bootstrap repository.

minor help on getting value of selected item to submit

I'm new to AngularJS.

I'm looking to submit the selected item into my form.

   MultiSelectDropDownDialogController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance', 'entity', 'MultiSelectDropDown', 'User'];

    function MultiSelectDropDownDialogController ($timeout, $scope, $stateParams, $uibModalInstance, entity, MultiSelectDropDown, User) {


        $scope.searchSelectAllModel = [];
        $scope.searchSelectAllData = [
            {id: 1, label: "Laser Beam Gun"},
            {id: 2, label: "Metal Spike Cereal"},
            {id: 3, label: "Hole Filled Parachute"},
            {id: 4, label: "Wet Matches"}
        ];

        $scope.searchSelectAllSettings = {
            externalIdProp: '',
            enableSearch: true,
            showSelectAll: true,
            keyboardControls: true};


        var vm = this;
        vm.multiSelectDropDown = entity;
        vm.users = User.query();


        $timeout(function (){
            angular.element('.form-group:eq(1)>input').focus();
        });

        var onSaveSuccess = function (result) {
            $scope.$emit('acmeSiteApp:multiSelectDropDownUpdate', result);
            $uibModalInstance.close(result);
            vm.isSaving = false;
        };

        var onSaveError = function () {
            vm.isSaving = false;
        };

        vm.save = function () {
            vm.isSaving = true;
            if (vm.multiSelectDropDown.id !== null) {
                MultiSelectDropDown.update(vm.multiSelectDropDown, onSaveSuccess, onSaveError);
            } else {
                MultiSelectDropDown.save(vm.multiSelectDropDown, onSaveSuccess, onSaveError);
            }
        };

        vm.clear = function() {
            $uibModalInstance.dismiss('cancel');
        };
    }

<div ng-dropdown-multiselect=""  options="searchSelectAllData"
                 selected-model="searchSelectAllModel" extra-settings="searchSelectAllSettings">
</div>


            <textarea type="text" class="form-control" name="selectedOption" id="field_selectedOption"
                   ng-model="vm.multiSelectDropDown.selectedOption"
                   required ng-minlength="2" ng-maxlength="30"></textarea>

I need to somehow update the value of vm.multiSelectDropDown.selectedOption when I choose something from the dropdown list.

Or, possibly update the textarea to reflect the changes from the dropdown.

Remove the node engine check from package.json or relax it

npm has removed support for "engineStrict": true in package.json and what you put in engines in package.json is purely advisory.

Unfortunately, Yarn went in a opposite direction and actually enforces the check unless you pass the --ignore-engines flag. This means people with the latest yarn installed are unable to yarn add angularjs-dropdown-multiselect until they learn about this flag.

Example of the error:

$ yarn add angularjs-dropdown-multiselect
yarn add v0.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "0.10.10".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

So, I think the engines field of package.json should either removed completely or at least relaxed to the following:

"engines": {
    "nodes": ">=0.10.10"
}

package not found with bower install

When i put "myforce-angularjs-dropdown-multiselect": "1.10.2" in bower.json and do bower install, bower doesn't find the package.

bower myforce-angularjs-dropdown-multiselect#1.10.2 ENOTFOUND Package myforce-angularjs-dropdown-multiselect not found

onSelectAll triggers onItemSelect for each item in the dropdown

Hi, I am still experiencing this issue even though I am using the myforce fork of the project

Style warning when using content security policy (CSP)

Thank you for branching this libraries and continuing to keep it current.

My application is using content security policy (CSP). With CSP I have it setup to prevent inline CSS styles. This library in-lines two styles. (line 33: style="overflow: auto", line 39: style="width: 100%;")

The warning that is produced in the console log (Chrome) is:
{code}
angular.min.js:190 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-N6tSydZ64AHCaOWfwKbUhxXx2fRFDxHOaL3e3CO7GPI='), or a nonce ('nonce-...') is required to enable inline execution.
{code}

I will attach a simple application that demonstrates this issue.

Checkboxes is not checked by default

<div ng-dropdown-multiselect="" options="columns" selected-model="visibleColumns" extra-settings="{
    scrollableHeight: '500px',
    scrollable: true,
    displayProp: 'title',
    idProp: 'key',
    showCheckAll: false,
    showUncheckAll: false
}" checkboxes="true"></div>

var fields = {'first_name': {label: 'First Name', visible: true}, 'last_name': {label: 'Last Name', visible: true}};
vm.columns = [];
vm.visibleColumns = [];
angular.forEach(fields, function (field, key) {
  vm.columns.push({ key: key, title: field.title });
  if (field.visible) {
    vm.visibleColumns.push({key: key});
  }
});

I think because of the custom display prop and id prop. Because when I change the code to:

 vm.columns.push({ id: key, label: field.title });
if (field.visible) {
  vm.visibleColumns.push({id: key});
}

and remove:

displayProp: 'title',
idProp: 'key',

from the extra settings, it'll work.
These settings I use from the original project dotansimha/angularjs-dropdown-multiselect. Not sure your project still supports them.

Keyboard controls not working

The keyboard controls are not working even though I have added the required key/value in the settings object.

TypeError: Cannot read property 'parentNode' of undefined
    at r.$scope.keyDownLink (angularjs-dropdown-multiselect.min.js:1)
    at fn (eval at compile (angular.js:13567), <anonymous>:4:328)
    at e (angular.js:23934)
    at r.$eval (angular.js:16251)
    at r.$apply (angular.js:16351)
    at HTMLAnchorElement.<anonymous> (angular.js:23939)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

and

This error when I type something in the search box

TypeError: Cannot read property 'parentNode' of undefined
    at r.$scope.keyDownSearchDefault (angularjs-dropdown-multiselect.min.js:1)
    at fn (eval at compile (angular.js:13567), <anonymous>:4:427)
    at e (angular.js:23934)
    at r.$eval (angular.js:16251)
    at r.$apply (angular.js:16351)
    at HTMLInputElement.<anonymous> (angular.js:23939)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.r.handle (jquery.min.js:3)

The settings object:

      {
            enableSearch: true,
            showCheckAll: true,
            showUncheckAll: true,
            searchField: 'include',
            buttonClasses: "btn btn-primary",
            displayProp: 'include',
            idProp: 'termId',
            externalIdProp: '',
            scrollable: true,
            scrollableHeight: 400,
            keyboardControls: true
       }

Note: The dropdown and the search work fine. Only the keyboard controls don't work.

Disable multiple selection

I want to use this library for multiple selection and single selection.

Is there a way to disable multiple selection .

Feature request: HTML templates for list items

Duplicate from original repo issue #222

It would be awesome if we could format the list items as we want. For example including small images or extra information rather than just the text attribute.

Is it possible to publish this version to npm?

For people using Browserify or Webpack