bentorfs / angular-bootstrap-multiselect Goto Github PK

Hey, this is not an issue, but becasue the documentation is not the most descriptive of its parameters, I would like to know if this support several things:

• ng-change - on change, can I trigger a function? (example: ng-change="myFunction()"
• paramter-key - If my array is of objects, can I deside what parameter of the object is the key? (example parameter-key="custon_id")
• parameter-value - format the shown value (example: parameter-value="name - key: id". When the object is {name: "example", key: "ex", id: 1} will show "example - ex: 1")
• button-title - custom button title for the button to show more than 1 word. (example: button-title="Countries")

Besides these, I realy like the design, and options for the directive, and looking forward using it if above things exist (I realy dont need everything, most I can simulate on my own, but I want to know if some exist for I not to write jumbled code inside your neat directive)

Thanks

I'm trying to set the items in the multiselect as select based on a model that I get from an http request.
Im not sure if this has something to do with the order I set the model and the options, but after the promise returns, I got both the options and the model, like this:

Model: [
{id: 1, nome: "Cafés"},
{id: 2, nome: "Bares"} ];

Options: [
{id: 1, nome: "Cafés"},
{id: 2, nome: "Bares"},
{id: 3, nome: "Restaurantes"}];

And the multiselect like this:

    <multiselect ng-model="Model" options="Options" id-prop="id" display-prop="nome"></multiselect>

The options are displayed correctly, like the options array, but the options on the model are not selected, and I think they should, because the multiselect element is displayed based on both the model and the options.
Basically the model is updated based on the template, but the opposite is not happening. When I set the model on the controller, I dont see this changes reflected in the template(display the items selected, for example).

Two of the items in this image should be selected, since they are in the model array.

I have a list of options that exceed 25. How would I display all of them?

I would like to change the Select drop down name to some other custom name. For example, I would like to change it to Campaign Select. How to do it?
Thanks in advance. I am adding a screen shot below for your reference.

I tried to input an object array

$scope.options = [
{
id: '1',
name: 'France',
capital: 'Paris'
},
{
id: '2',
name: 'United Kingdom',
capital: 'London'
},
{
id: '3',
name: 'Germany',
capital: 'Berlin'
}
];

to directive

I am taking an slice of undefined error

angular.min.js:114 TypeError: Cannot read property 'slice' of undefined
at i (angular-bootstrap-multiselect.min.js:1)
at g.$render (angular-bootstrap-multiselect.min.js:1)
at angular.min.js:277
at m.$digest (angular.min.js:138)
at m.$apply (angular.min.js:141)
at g (angular.min.js:94)
at t (angular.min.js:98)
at XMLHttpRequest.u.onload (angular.min.js:99)

Is this related to my angular version? Or object as an input does not work regularly?

Its very superb angularjs directive. but without event handler its little bit lag.

I have successfully pre-populated the multiselect using the id-prop. When I click on the dropdown it DOES show my pre-selected value(s). But it does not show up in the initial view of the dropdown, neither the selected item name nor the '2 Selected' value. How do I trigger that, or can it be added to the code.

Hi,
my code first
<multiselect ng-model="selectedObject" options="searchObjects" class="search-object" show-search="false" show-select-all="true" show-unselect-all="true" ></multiselect>
`
$timeout(function () {

resolve(value.SearchObjects); 

$scope.searchObjects = ["one","two"];

$scope.selectedObject = ["one","two"];

}, 100);`
the problem is that page would not show up how many options i selected before i click the multiselect. did i doing something wrong? and how to show up the default value when the page loaded.

we are getting options from database other than that i want to give one option i.e"others" by clicking others we want to type and want to store that data

Hello,

I would like to add custom labels to the select buttons so that it does not just display 'Select'. I viewed the other solution which requires source manipulation which is not ideal.

Hello,

First of all thank you for the great directive. We've been using it successfully in our application and we're very satisfied.

However, now our application evolved to the point we need to translate it into many languages. I was looking into the source code (release version 1.1.4) and saw that labels like "Select", "Select All", "Unselect All" and "{{ N }} selected" are hard-coded in the code, so we can't translate them.

Could you please change the directive to allow us provide translations in different languages?

Thanks in advance.

Option to show all label name in select. If there are 2 more records, do not show 2 selected but the name of the label.

Thank you, your component is awesome.

How to display a scroll bar for large number of records.

Hi Everyone, this is my first time using angular bootstrap multiselect and am wondering if there's a way to show only unique values in the options dropdown. For example I'm putting this multiselect on a table with a column called Work Location. In some cases, there are multiple entries with the same work location and it shows up multiple times in the dropdown. Is there a way to just show that option once, but when chosen, selects all the entries that have that work location? Thanks!

bower angular-bootstrap-multiselect#^1.1.6 not-cached https://github.com/sebastianha/angular-bootstrap-multiselect.git#^1.1.6
bower angular-bootstrap-multiselect#^1.1.6 resolve https://github.com/sebastianha/angular-bootstrap-multiselect.git#^1.1.6
bower angular-bootstrap-multiselect#^1.1.6 ENORESTARGET No tag found that was able to satisfy ^1.1.6

Additional error details:
Available versions in https://github.com/sebastianha/angular-bootstrap-multiselect.git: 0.5.0, 0.4.1, 0.4.0, 0.3.5, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.1, 0.2.0, 0.1.1, 0.1.0

Search results should be visible but un-clickable when the selection limit is reached. The current behaviour (clickable but nothing happens) is confusing

Is there any way to do submenus?

Hello,

there is an event/action that reset/clear multiselect filter with search box?

When filter with search box, on new search, the options doesn't reset.

Thanks

<multiselect ng-model="$ctrl.platterFood" options="$ctrl.foodForPlatters" show-search="true" id-prop="id" display-prop="name"></multiselect>

Each time I select a single item from my list, $ctrl.foodForPlatters, which is an array of objects, ALL items become selected. Additionally, on your documentation page, the options is spelled with a capital letter O. Is that intentional? If so, then, what is the options attribute for? Is that where I am supposed to place my data source?

Options: [
"France",
"United Kingdom",
...
]

Thanks you for any assistance you can provide.

In my new website, I make extensive use of this very useful multi select script.
But I have several selectors, where you can only have one selected option at a time.
When I deployed my new website, the feedback I got most often was, that it is inconvenient to have to manually unselect the previously selected item, in order change the selection to another one.
Would it be possible to have an option for this case, where the previously selected item is simply replaced by the newly selected item?
But anyway, thanks for providing this very useful feature set!

Can you custom display text? example: 2 selected ---> 选中 2 个

Please create a NPM package so it can be install using

npm install angular-bootstrap-multiselect --save

See npm-create or create npm package.

Please add selectedoptions and unselectedoptions to scope so it will be easy to add data from input to selected. Thank you

Hi All,
Please help me. i am using this multi-select to insert id into db using angular as front-end. but while edit the form the selected options i need to high-light inside the multiselect drop down so that i can edit and update further...?

How i can do that?

Below is the example:
JS:

inside controller:
this.jsontree={};
this.products=[list of array of products];

html

<multiselect ng-model="$ctrl.jsontree.test" options="$ctrl.products" show-search="true" id-prop="id" display-prop="name" search-limit="10"> </multiselect>

i selec 10 products but while edit its highlighting the selected products... how i can do that?

Hello,

I have a list of cuisines and set the the cuisines that should be set initially with an AJAX call and set them in the model array like this:

$scope.cuisines.push(response.data.cuisine1);
$scope.cuisines.push(response.data.cuisine2);
$scope.cuisines.push(response.data.cuisine3);

This nicely shows the selected values.

However when I remove selected cuisines and click new ones the model cuisines is not updated anymore.

The multiselect line is as following:
<multiselect ng-model="cuisines" show-search="true" search-limit="10" options="options" selection-limit="3"></multiselect>

I want UI like this using the angular-bootstrap-multiselect. Is there any way to achieve this?

Hi,

Can this plugin be updated for Bootstrap 4?

Currently, the design breaks when adding it to a bootstrap 4 template.

Hi Ben. How are you?

I would like to know how can I translate this plugin to my language: pt-br. Once I am using your excelent plugin for my project.

Kind Regards,

Glaucia Lemos

For some reason I have to do this :

   x: function(d){ dx = new Date(d.date); dt = new Date(dx.setDate(dx.getDate() + 1)); return dt; },

because otherwise I get one day earlier, if I just do new just Date(d.date).

Is there any support for <optgroup>?

I couldn't find anything in the docs.

Hi,
I'm new to directives, so maybe I have made some mistakes..

I'm using your directive like this :
<multiselect id="inputBus" ng-model="selection" options="bus" show-select-all="true" show-unselect-all="true" show-search="true" search-limit="3"> </multiselect>

--> For some reasons I'm updating my $scope.bus, but the directive is not watching it. And it's not updating the options of the multiset.
Do you have any workaround to make it working ?

--> I'm trying to get into my main ctrl the value of the $scope.selection, in my html I can see the values with {{selection}}, but in the ctrl of the html I've a $scope.selection undefined or empty if i'm declaring it. What am I doing wrong ?

Thanks by advance.
Regards,
Romain.

Some sequences can lead to items disappearing from the list of options. The following steps will reproduce:

Click Select All
Click Select All
Click an option to deselect it
That option is now nowhere to be found.

A working example of the bug is here:
https://jsfiddle.net/justinlinz/8dkg87bL/

The issue is due to a reference of the item list being modified. I will add a pull request to remedy this.

When some of the first elements of the list are selected, the directive will show less elements than configured through searchLimit

Hello, how can i easily change the button text to something i want?

Hello, I'm trying to use ng-change with this directive.

I've noticed that from time to time the ng-change callback gets called twice.

I think this happens when the newly selected option is being added among the selected ones and that triggers a reordering of the array (i.e. the newly selected option gets inserted in the middle or the start of the selected options).

The model is first updated with the newly selected option at the end (1st on-change), then it's sorted to proper order (2nd on-change).

Thank you,

Andrea

Hi, I hope you can help me. I'm trying to update the elements but the multiselect is only updated when I click it. I try to manually fire the event and It's working but I want to know if there is a way to update the elements without calling the click event.

Have a nice day.

no display when the data source is a query from a service from the controller.
but if I send an array burned from controller. works , but not if the array dynamically built it from some service.

Hi dear.

How are you?
I have found a problem in the source code so would like to notice to you.
I tried to use async data load function for multiselect but got javascript error whenever open dropdown.
So I checked the source code of multiselect and found there is a problem.
I think you should replace these lines :

$scope.toggleDropdown = function () {
      $scope.open = !$scope.open;
      $scope.resolvedOptions = $scope.options;
      updateSelectionLists();
};

by these lines :

$scope.toggleDropdown = function () {
      $scope.open = !$scope.open;
      if (typeof $scope.options !== 'function') {
            $scope.resolvedOptions = $scope.options;
      }
      updateSelectionLists();
};

I think this problem had been made when fix the issue #21 .
I hope this report would help you even a little.

Thanks,
Zhang

Hi,
thanks for your multiselection items, it works very well.
I am just wondering how can I set already selected items in the dropdown item. I am using Object model options.
Here is my implementation

/
/

eventiAvversiItems is a array with two attributes: "designTableId" and "descrizione".
Can you please help me?
Thanks in advance

How to change the default placeholder in that dropdown?

Please update the npm package to latest version. It says that only available versions are
npm ERR! Valid install targets:
npm ERR! 1.1.2, 0.0.3

Hi,

I've the ng-model value as an object.
Ex: {
name: 'conceptData',
id: '1'
}
Also display-prop value is set to name. However the name is not shown. What am I doing wrong?

the npm package fails when i try to install it

If i select 2 itens from the list, the text inside button become "2 selected".

Is there a option to choose when it start count?
Like, select 3 options and only change the text to 3 selected when the third element is chosen or 1 to become 1 Selected

Looking at your example :
https://github.com/bentorfs/angular-bootstrap-multiselect/blob/master/test/e2e/test-async-datasources.html

I have component with the following function :

ctrl.async = function() {
        return $q(function (resolve, reject) {
            console.dir(ctrl.opts);
            $timeout(function() { resolve(ctrl.opts); }, 3000);
        });
    }

I'm loading ctrl.opts on $onInit() ..

  <multiselect name="abc" ng-model="$ctrl.repForm.abc" options="$ctrl.async" id-prop="id" display-prop="name"></multiselect>

the drop down is empty... the normal Select work.

Is there some way for the options to behave as any ng-model i.e. update when the data changes !?

It seems that the multiselect is initialized before the component $onInit() and at that time ctrl.opts is still empty list. Even if I put the call to fetch the options from the server nothing is executed from the async() method.
Does it has something to do with using it in component ?

Hi,

great lib, thanks.

Iḿ having some mistakes when I use something like this:

Any idea??

Thanks in advance