I'm using this dropdown modules. I want to ask, how can i catch when i select item dropdown change event in directive?

I can catch event in controller, but i can not catch event in directive.. How should i use in directive?

Make "select all" a toggle button to select and unselect all instead of two buttons using config to say so.

Also, the text for this button (all buttons) and its icon/checkbox should be configurable.

Thanks for the nice plugin. But I am looking for some thing like (With Optgroups) at http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/. The drop down options should support grouping, with select all groups, select individual groups, etc features as shown in the above referred link with check boxes. In the grouping example you have provided in the demo page, male and female groups are disable for individual grouping check/uncheck. Is it possible to achieve those features with this plugin?

I think the selected items array is better off as an array of id values instead of objects with an "id" property.

// Selected items array
 [
  {
    "id": 2
  },
  {
    "id": 1
  }
]

vs

[2,1]

The idProp doesn't bring any value for most use cases since theres only 1 property on the object and its consistent. We just end up mapping the selected items array into an array of only values.

Thanks for this neat directive. If anyone's interested, I've added the ability to handle images/icons or other html as option labels and button text.

Just curious, ...upgrade to Angular 1.3 has seemingly broken a number of widgets -- am looking for a quick replacement on a multiselect drop down. Thanks!

Hi, im using django and angular-1.3.2. Django uses the symbols {{ }} in templates. I changed the angular to use [[ ]]. When i use this, the angular crash because it uses the denormalizeTemplate function to replace {{}} to [[]].

 // ANGULAR 1.3.2 LINE 6769
 var startSymbol = $interpolate.startSymbol(),
        endSymbol = $interpolate.endSymbol(),
        denormalizeTemplate = (startSymbol == '{{' || endSymbol  == '}}')
            ? identity
            : function denormalizeTemplate(template) {
              return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
        },
        NG_ATTR_BINDING = /^ngAttr[A-Z]/;

Im fix, using replace

// angularjs-dropdown-multiselect.js line 55
element.html(template); 

to

// angularjs-dropdown-multiselect.js line 55
return template;

The checkmarks aren't rendering using this:

https://github.com/goodbomb/angular-gulp-browserify-starter

I've tried using onItemSelect event but it never gets called. Here are my options:

$scope.multiSelectSettings = {
        enableSearch: true, 
        displayProp: 'name',
        scrollableHeight: '200px',
        scrollable: true,
        buttonClasses: 'btn btn-entity-select',
        smartButtonMaxItems: 10,
        dynamicTitle: true,
        externalIdProp: '',
        events: {
            onItemSelect: function (item) {
                console.log('selected: '+item);
            }
        }
    };

Thanks for the great directive. I just started using it and noticed one small thing: could you make the hardcoded overflow style configurable. I would like to have only vertical scrollbars (if needed) and set overflow-x to hidden. Seems like too small a change to actually make a pull request. Or maybe this is configurable and I just didn't find it yet?

it should be onDeselectAll. Wasn't a big deal to read the code and figure it out, but some people would not do that.

I've tried searching the repository for license information for the directive itself, but only find licenses in bower.json and pages/stylesheets/stylesheet.css.
Licensing info would be very helpful for knowing where and how we're able to use the code.

Please support template-url attribute.

I am using this in a ng-repeat. When the total number of repeats is fairly low, performance is acceptable. But once the number of elements gets above 30 or so, actions on the page become significantly slower. It appears to be due to the ng-dropdown-multiselect, as the speed problems immediately disappear when it is removed from the page.

Are there any tricks to improving the performance of the multiselect in this situation, or could this be a bug?

Hi,

Im installing angularjs-dropdown-multiselect via bower, im using angular 1.2.16v.

I set the following div:

$scope.multiselect = {estados = [{id: 1, label: '1'}, {id: 2, label: '2'}], selected: []};

when load my page i getting and undefined in line (src version) 289

return _.findIndex($scope.selectedModel, getFindObj(id)) !== -1;

_.findIndex is not defined, where are defined ?

Greetings

Hey, what about adding a paging to the large list? This would make it even more faster for big data . You've done a fantastic job tho'

The option to closeOnSelect doesn't appear to be implemented in the current version. I would love to activate that setting on my project. Could you implement it in the next version?

Hi,
This looks like a great lib, thank for bringing this to the world!

Would it be possible to add an option to customize the classname used for the checkmark icons?
It seems to be hardcoded to use glyphicon glyphicon-ok (and potentially the same for other icons if any)

I am using bootstrap 2.3.2 and the correct class would icon-ok in this particular case

Thanks!

Hi,

Scrollable doesn't show scroll bar in the demo. Please update the demo as appropriate.

I use angularjs-dropdown-multiselect to let the user specify how much or how little of their tabular data they see; I let them select/de-select available columns/fields and show/hide them accordingly. The labels in the dropdown array match the data field elements of the array, so selecting a choice (col3 for example) enables the visibility of a data field by the same name (col3 in this example).
Two of the columns however should be shown/hidden together. If the user selects col4, I would like both col4 and col5 to appear. If the user deselects col5, I would like both col4 and col5 to be hidden. Alternatively, I could use a single dropdown choice, perhaps called col4/col5, that shows/hides col4 and col5 together.
How would I go about doing either of these?

Thanks

Would be great to have keyboard support for navigation thru the dropdown items and select/deselect them.

Hi, dotan

it's posible use without a id on the model example:

$scope.colors = [{name:'RED', name:'BLACK', name:'White', name:'BLUE'}];

Hi, we want to use your nice widget. Can you please license it so we can know if we can?

I have page with two multiselect controls with option closeOnBlur=true. closeOnBlur does not work when I click on other multiselect control.

It looks like this code does not work correctly:
angularjs-dropdown-multiselect/src/angularjs-dropdown-multiselect.js:161
while (angular.isDefined(target) && target !== null && !parentFound) {
if (_.contains(target.classList, 'multiselect-parent') && !parentFound) {

Hi,

I've installed "angularjs-dropdown-multiselect": "~1.5.0" and I found out an issue in the code.
If you click on Check all button, onItemSelect event is triggered per each item in the model.
If you click on Uncheck All, I'd expect onItemDeselect event to be triggered per each item.

I'm aware of onSelectAll/onDeselectAll events, I just think that Check all/Uncheck all should behave in the same way.

$scope.events = {
onItemSelect: function(item) {
return $log.warn("" + item + " selected"); // is triggered per each item on Check all
},
onItemDeselect: function(item) {
return $log.warn("" + item + " deselected"); // not triggered on Uncheck all
}
};

Hope this will help somebody.

I'm doing a repeat of "(key, value) in attribtues" on the option I have options="attrtype.vale for attrtype in value" however I'm getting a token 'for' is an unexpected token.

my json data is as follows:
attributes= [
{
"attributes": {
"Band":["800 Mhz", "1900 Mhz"],
"UMTS Capability":["CAT 10", "LTE"]
}
}];

Error: [$interpolate:interr] Can't interpolate: {{getButtonText()}} 
TypeError: Cannot read property 'length' of undefined

Im using:

div ng-dropdown-multiselect="" options="permissions" selected-model="newGroup.permissions" extra-settings="{displayProp: 'name'}">

and: (JS)

[
{
"id":37,
"name":"Can add api access",
"codename":"add_apiaccess",
"content_type":{
"id":13,
"name":"api access",
"app_label":"tastypie",
"model":"apiaccess"
}
},
{
"id":40,
"name":"Can add api key",
"codename":"add_apikey",
"content_type":{
"id":14,
"name":"api key",
"app_label":"tastypie",
"model":"apikey"
}
},
{
"id":13,
"name":"Can add content type",
"codename":"add_contenttype",
"content_type":{
"id":5,
"name":"content type",
"app_label":"contenttypes",
"model":"contenttype"
}
}
]

Someone can explain me why?

Any ideas how I can access the searchFilter variable from outside the $scope of the directive?

I’d like to propose a generic onChange event which fires whenever one of the other events occur:

• onItemSelect
• onItemDeselect
• onSelectAll
• onUnselectAll

In many cases you don’t care how the selection changed — you only want to know that it did.

Imagine a multiple, chained dropdowns scenario, where the n + 1th dropdown’s items are filtered based on the selection in the nth dropdown. You won’t care whether an item (or all) was selected or deselected, you only want to know that the n + 1th dropdown’s choices need to be updated.

Currently the only way to achieve it is to bind all 4 events:

<div ng-dropdown-multiselect
     events="{
         onItemSelect: callback,
         onItemDeselect: callback,
         onSelectAll: callback,
         onUnselectAll: callback
     }"></div>

While the alternative using onChange would be much shorter:

<div ng-dropdown-multiselect
     events="{ onChange: callback }"></div>

If you use the Search Filter and it matches on a sub-set of your overall list, when you click the Check All button, you should expect only the matching sub-set to get checked. The current functionality is that Check All always checks all, regardless of your use of the Filter. Uncheck all should also behave this same way, only on the matching subset when the search filter is actively filtering your list.

Is there a way we can select all the filtered options only by clicking the 'Check All' button ?

For example: List has,
Apple 1,
Apple 2,
....
....
Apple 1000,
Grape,
Banana

Searching : Apple

The result would be,

Apple 1,
Apple 2,
..
...
Apple 1000

Is there a way to select all the filtered results (only list of 'Apple' ) using the Check All button ?

Please show the selected items first

Hi, I was wondering how to save the selected.
I've tried using $watch on the 'selectData' but it doesn't seem to change.

How am I supposed to use this? The doc doesn't seem to cover that, only how to display it.

I've only tested this with version 1.5.2. Changing the same dropdown's selectionLimit to a different number or null fixes the problem.

Console Error :

Error: [$interpolate:interr] Can't interpolate: {{getButtonText()}} 
TypeError: Cannot read property 'length' of undefined
http://errors.angularjs.org/1.2.19/$interpolate/interr?p0=%7B%7BgetButtonTe…%A0&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
    at http://0.0.0.0:9000/bower_components/angular/angular.js:78:12
    at Object.$interpolate.fn (http://0.0.0.0:9000/bower_components/angular/angular.js:8756:26)
    at Scope.$digest (http://0.0.0.0:9000/bower_components/angular/angular.js:12426:40)
    at Scope.$apply (http://0.0.0.0:9000/bower_components/angular/angular.js:12699:24)
    at done (http://0.0.0.0:9000/bower_components/angular/angular.js:8287:45)
    at completeRequest (http://0.0.0.0:9000/bower_components/angular/angular.js:8499:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://0.0.0.0:9000/bower_components/angular/angular.js:8438:11) angular.js:9959

HTML:

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

JS:

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

I need to make the selectionLimit as 1 and i want to preselect 1 value.
I am successfull in doing it, but when i unselect the selected value,or select any other value the first value in the options array is dissapearing

http://plnkr.co/edit/xnwbrItgiJaaS14JTs15?p=preview

I wrote an app with several simple dropdown selections inside ng-repeat loop. The population of options works very well and the count of preselected items also. I use async request to achieve that. But the preselected Items are not marked as preselected. So I think it has something to do with the isChecked() function. Is that possible?

When clicking inside a SVG graphic anywhere on a page with a dropdown-multiselect I get "Uncaught TypeError: undefined is not a function" on row 155 in angularjs-dropdown-multiselect.js.

It seems you can't expect className to always be a string.

_.contains(target.className.split(' ')

Hi Dotan,

Is it possible to use multiple extra-settings together?

Thanks.

First off, thanks for a great control for ng. Am finding plenty use in my app. Q - the options attribute is being populated by a web api call to retrieve the dropdown contents. However, this control also employs groupByTextProvider to group by a field in the data. Problem is that the groupByTextProvider callback runs before the web api call returns to populate the options attribute and so the grouping doesn't work.
My current workaround is to load the options data earlier in the program and have it about in readiness for the view that has the groupByTextProvider. Any ideas how I can delay the grouping action or otherwise fix it better than I have?
Thanks again,
John K

My options:
$scope.optionsMultiSelect = {
displayProp: 'value', idProp:'value', externalIdProp: '' };
externalIdProp is set to '' so it should return an object.

onItemSelect returns the object. onItemDeselect just returns value which is a string.

Have I misunderstood the documentation or is this a bug?

I just installed via bower included dependecie but I get

Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile

animate is installed

The Search action is filtering using all properties of the model. We added "searchProperty" atribute in order to specify the filter property of the model.

Source code changes:

if (groups) {
//  template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
    if(attrs.searchProperty) {
        template += '<li ng-repeat-start="option in orderedItems | filter: { ' + attrs.searchProperty + ': searchFilter }" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
    } else {
        template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
    }
    template += '<li ng-repeat-end role="presentation">';
} else {
//  template += '<li role="presentation" ng-repeat="option in options | filter: searchFilter">';
    if(attrs.searchProperty) {
        template += '<li role="presentation" ng-repeat="option in options | filter: { ' + attrs.searchProperty + ': searchFilter }">';
    } else {
        template += '<li role="presentation" ng-repeat="option in options | filter: searchFilter">';
    }
}

Example:

<div ng-dropdown-multiselect="" options="list" selected-model="model"    extra-settings="multiselectSettings" search-property="label" ></div>

TypeError: undefined is not a function
    at Scope.$scope.isChecked (http://0.0.0.0:9000/bower_components/angularjs-dropdown-multiselect/src/angularjs-dropdown-multiselect.js:289:14)
    ...

TypeError: undefined is not a function
    at Scope.$scope.setSelectedItem (http://0.0.0.0:9000/bower_components/angularjs-dropdown-multiselect/src/angularjs-dropdown-multiselect.js:272:20)
    ...

I was able to fix the problem after including Lodash in my index.html, but you may want to mention in the guide to import Lodash along with angularjs-dropdown-multiselect in the future.

Is there any way to disable the menu? Or maybe just show "no data" when there are no options to select from?

I am failing to see why the fail case would not work. The only thing I have come up with is the quotes are changing from single to double in the failure case. Could someone help me understand better what might be going on? At this point it looks like a bug, but I'm pretty new to angular so wouldn't surprise me if it was my own doing.

Thanks for any help!

my directive

'use strict';

app
  .directive('preparerFilter', function () {
    return {
      templateUrl: 'templates/preparer-Filter.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
         scope.PreparersCustomTexts = { buttonDefaultText: 'my text' };
      }
    };
  });

fails

templates/preparer-filter.html

<div 
    ng-dropdown-multiselect="" 
    ng-click="ActiveFacet='preparer'" 
    options="terms" 
    events="gridEvents" 
    selected-model="[]" 
    extra-settings="example13settings"
    translation-texts="{{ PreparersCustomTexts }}"
    blah-test="{{ PreparersCustomTexts }}" 
    checkboxes="true">
</div>

{{ PreparersCustomTexts }}

exception details

angular.js:11594 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{ PreparersCustomTexts }}] starting at [{ PreparersCustomTexts }}].
http://errors.angularjs.org/1.3.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=…%7B%20PreparersCustomTexts%20%7D%7D&p4=%7B%20PreparersCustomTexts%20%7D%7D
    at http://localhost:9000/bower_components/angular/angular.js:63:12
    at Parser.throwError (http://localhost:9000/bower_components/angular/angular.js:11998:11)
    at Parser.object (http://localhost:9000/bower_components/angular/angular.js:12380:16)
    at Parser.primary (http://localhost:9000/bower_components/angular/angular.js:11968:22)
    at Parser.unary (http://localhost:9000/bower_components/angular/angular.js:12258:19)
    at Parser.multiplicative (http://localhost:9000/bower_components/angular/angular.js:12241:21)
    at Parser.additive (http://localhost:9000/bower_components/angular/angular.js:12232:21)
    at Parser.relational (http://localhost:9000/bower_components/angular/angular.js:12223:21)
    at Parser.equality (http://localhost:9000/bower_components/angular/angular.js:12214:21)
    at Parser.logicalAND (http://localhost:9000/bower_components/angular/angular.js:12205:21)

works

templates/preparer-filter.html

<div 
    ng-dropdown-multiselect="" 
    ng-click="ActiveFacet='preparer'" 
    options="terms" 
    events="gridEvents" 
    selected-model="[]" 
    extra-settings="example13settings"
    translation-texts=""
    blah-test="{{ PreparersCustomTexts }}" 
    checkboxes="true">
</div>

{{ PreparersCustomTexts }}

Hello, I've noticed that also passing a funciton in setting object for the property smartButtonTextConverter the labels doesn't changes their value. That function isn't invoked.
The problem is present in your example too.
Thanks
Michele Bertuccioli

Thank you for the great AngularJS module. I'm having an issues figuring out how to pull the title to show in the selection block/button when pulling one or two items. Example would be if I have 3 dropdown selections titled "Blue, Red, Green"--when I click on "Green" I would like the word "Green" to be displayed instead of "1 selected". I'm sure there is an easy way to make this happen, I'm just a little confused with the documentation.