frapontillo / angular-bootstrap-duallistbox Goto Github PK

Hi,

I created a working example with my own angular elements, but there is one thing i cant figure out.

How do I pre-select some of the objects in the list?

-Tom

Hello,

I am using duallistbox but when i click on one value,it moves all elements. It is once i regenerate duallistbox(means show and hide)

Please help me?

Is there a way to know when the NonSelected list box is empty? I did a $scope.$watch to know when a filter is being applied but I need to know what is left in the list afterwards. More specifically when the list is empty.

        $scope.$watch(
            "vm.settings.filterNonSelected",
            function handleFooChange( newValue, oldValue ) {
                console.log( "vm.fooCount:", newValue );
            }
        );

We have about 12,000 records we would like to display and filter. Not sure what the most efficient way is to do this. When I bind to them it basically kills the page.

ng-options="obj.fullNameEmail for obj in vm.formattedGmContacts track by obj._id"

Hi!

Thanks for creating this angular version of the duallistbox.

I tried to use the info-all = 'false' setting, but instead of hiding the info text it shows the text 'false' above the dual list box.

I changed the code myself by adding an extra transformFn to the InfoAll attribute.

    var getFalseOrStringValue = function (attributeValue) {
        if (attributeValue === false || attributeValue === 'false') return false;
        return attributeValue;
    };

...and...

        'infoAll': {
          changeFn: 'setInfoText',
          defaultValue: 'Showing all {0}',
          transformFn: getFalseOrStringValue
        },

I am not keen on making own changes. If you could provide a fix I would be very gratefull.

Hi, will you add support for angular 4?

I have created the following JSFiddle with your example, but I cannot make it work:

http://jsfiddle.net/rtubio/u3rLhqxa/2/

I am always getting the following error on the JavaScript console:

Error: d.bootstrapDualListbox is not a function
    .link/m/</<@https://raw.githubusercontent.com/frapontillo/angular-bootstrap-duallistbox/master/dist/angular-bootstrap-duallistbox.min.js:9:1994
$CompileProvider/this.$get</Attributes.prototype.$set/<@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:5333:13
... etc...

Any ideas?

Hi,
I am try to use you directive. But, i am getting 5 times dualllistbox.
I am trying last two days.
Can you tell me how can i resolved??

When I connect ng-model to a controller scope variable, it does not update the view if changes are made in the controller variable. For example, I'm trying to find a way to initialize the "selected" listbox by doing the following:

<select
           ng-options="e.displayName for e in job.allEmployees"
           multiple
           ng-model="job.allEmployeesOnJob"
           bs-duallistbox
           ></select>

In the controller, I initialize allEmployeesOnJob to some array of objects:

jobService.getEmployeesOnJob(job.jobId).then(
              function(emps){
                vm.allEmployeesOnJob = emps;
                _.each(vm.allEmployeesOnJob, function(item, index, list){
                  item.displayName = item.firstName + " " + item.lastName + " - " + item.homeLocation.name;
                });
              }
            )

The right side listbox should show the initialized list of employees but it does not. Then when I click an item from the left list, it moves to the right list but completely overwrites the "job.allEmployeesOnJob" variable. I believe this means two-way binding is not setup properly to ng-model because updates in the controller should be reflected on the DOM if it were.

Hello everybody, I want to focus and add tabindex in both filter, button, and each option of select, and hotkey 'ENTER' in select1 can move data to select2, replace change or click with keycode = 1, and execute with 'LEFT' & 'RIGHT' move via tabIndex. Help me. Thank all

hi,

this property is written inside jquery.bootstrap-duallistbox.js as "selectorMinimalHeight", therefore it doesnt match with directive and doesnt work.

I have successfully integrated duallistbox with dynamic data. The data is saved but at the time of edit, I need to show the options saved in db as selected.
For ex: While saving user data, we are showing user group in duallistbox and based on options selected, the data is being saved. At the time of edit, how do I show the option(s) as selected ?

P.S. The options will be dynamically passed from web-service call

Below image shows what I am trying to achieve. I could not find API for the same. Please guide

Thanks.

I am getting an error when I tried using it

TypeError: element.bootstrapDualListbox is not a function.

My bower.json looks like below

{
"name": "",
"version": "0.0.1",
"description": "**",
"dependencies": {
"bootstrap": "~3",
"angular": "~1.2",
"angular-resource": "~1.2",
"angular-animate": "~1.2",
"angular-mocks": "~1.2",
"angular-bootstrap": "~0.11.0",
"angular-ui-utils": "~0.1.1",
"angular-ui-router": "~0.2.10",
"angular-strap": "~2.0.5",
"angular-file-upload": "~1.1.1",
"angularjs-dropdown-multiselect": "~1.5.2",
"ng-grid": "~2.0.13",
"ng-currency": "~0.7.6",
"angular-camera": "~0.1.3",
"pdfmake": "~0.1.8",
"ng-pdfviewer": "~0.2.1",
"angular-bootstrap-duallistbox": "~0.0.2"
}
}

What is what we have to add to index.html to have the simplest functional demo?

First I'd like to say thank you for writing a quality wrapper for the Bootstrap Dual Listbox. One thing I'm not able to figure out is how to set the initially selected values for the listbox. Here's how I have it declared:
<select ng-options="p.labelField for p in param.ValidValues track by p.valueField" multiple="multiple" ng-model="param.values" json = "false" bs-duallistbox ng-change="param.onChange(param)" name="{{param.Name}}" class="form-control" required></select>

I tried populating the param.values with the initially selected items but it doesn't take. Everything works as expected when I go to read the selected items after the user selects them.
I have also tried modifying my param.ValidValues by adding "param.selected = true".
Any suggestions?

hi,

i have an model variable $scope.selectedData in my controller. the problem is it doesnt update the real variable. i debugged directive and found that directive creates another variable inside its scope with same name and manipulate that, not the real one. besides, it see my variable inside 2 level upper parent.

thanks

I am trying something like this in my controller:

GroupsService.getAllUsersByGroup.query({id: idToEdit}).$promise.then(function (resp) {
                $scope.selectedUsers = resp;
                //selectedUsers is populated, but the list is not refreshed
                console.log(resp);
                groupDataLoaded = true;
});

And in my view I have this:

<select ng-model="selectedUsers" ng-options="u as u.username for u in users" multiple bs-duallistbox move-on-select="false">
</select>

I need to display the already selected users in the right list and the rest of the users in the left one when my page loads (sort of an update group feature). My problem is: I can select users from the list on the left, but not from the controller. Two way binding just doesn't seem to work for me.

No idea if this is a bug or not an included feature.

Hi,

I am trying to use this directive. But somehow ng-model binding is not working for me.
It simply not populating the ng-model. Any help on this?

When you have a lot of items, the control correctly shows the scrollbar.
The problem is that when I select one of the latest items, the scrollbar returns to the top.
Is it possible to avoid this behavior, in order to avoid to scroll to the bottom again?

When I set the required attribute on the control I get the error: An invalid form control with name"='blabla' is not focusable. Is there a way to set required on the control?

Is there any possibility to use npm instead of bower?

Hi! Thanks for creating this angular version of the duallistbox.

Can you explain how to access the helper1 and helper2 defined by the postfix? Is it a part of variable defined in ng-model?

I'm able to get the selected list from ng-model, but cannot find the removed list...

The index.html doesn't work in the example folder. Was hoping to see a demo of this somewhere but none exists and the example isn't functional.

Is it possible to show a tooltip when hovering on a single item?
This because I have very long text per each item and I cannot see it entirely: