Async load in ng Component ?

[vsraptor]

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 ?

[vsraptor]

ctrl.async works now but i have to use Search-box and have to explicitly enter something in the search-box, so that the http-request is made. I want to be able to see the options when I open the drop-down !!!

[vsraptor]

I solved it in the following way. Don't know how correct it is. Changed this in the multiselect source code :

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

to this :

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

[kushanz]

yeah Its works for me also. than You..

[bcatalin]

For me this is not working, since I get an error on the first call for toggleDropDown

TypeError: $scope.resolvedOptions.filter is not a function
    at updateSelectionLists (angular-bootstrap-multiselect.js:76)
    at m.$scope.toggleDropdown (angular-bootstrap-multiselect.js:54)
    at fn (eval at compile (angular.js:21789), <anonymous>:4:233)
    at f (angular.js:22154)
    at m.$eval (angular.js:15546)
    at m.$apply (angular.js:15581)
    at HTMLButtonElement.<anonymous> (angular.js:22154)
    at HTMLButtonElement.c (angular.js:3974)

and it looks like resolvedOptions is not an array.

I am using Object as a Model.

       <multiselect ng-model="subsystemListSelected" options="subsystemListFunction" show-search="true" show-select-all="true"
                    show-unselect-all="true" id-prop="name" display-prop="name">
       </multiselect

$scope.subsystemListFunction = function ()
{
  return $q(function (resolve, reject) {
              console.log($scope.subsystemList);
              $timeout(function() { resolve($scope.subsystemList); }, 300);
          });

}

[bcatalin]

Fixed by using $scope.updateOptions instead of updateSelectionList()