Default value is deleted when I use data from controller?

[vukan71]

{ "className": 'col-xs-4', "key": "my_key", defaultValue: [{id:12, last_name: "Doe", name: "Jane"}], "type": 'ui-select-multiple', "templateOptions": { "optionsAttr": 'bs-options', "ngOptions": 'option[to.valueProp] as option in to.options | filter: $select.search', "label": 'My Label', "valueProp": 'id', "labelProp": 'name', "placeholder": 'Select person', "options": [] },

    controller: function($scope) {
        customerService.getPersons().then(function(data){
            $scope.options.templateOptions.options = data;
            return data;
        });
    }
}

Default value is deleted as soon as service is resolved.

When I don't use dynamic data from controller, default value is correct, but with controller I can see default value before getPersons() is resolved. As soon as it is resolved, default value is deleted ...

[gillchristian]

Could you please reproduce your issue with issue.angular-formly.com?

It will help us determine what exactly the problem is that you're describing and how it could be fixed. Thanks!

[vukan71]

I tried to reproduce it: http://jsbin.com/rayipi/1/edit?html,js,output , but when I put: "type": 'ui-select-multiple', I don't see form, I can see it locally, and it works ?

I just tried to add on issue.angular-formly.com in controller:

return $timeout(function(){ $scope.options.templateOptions.options = allData; }, 2000 );

instead of calling service, but again I can't see dropdown here? I use formlyBootstrap, formly 7.3.7, angular 1.4.8

[gillchristian]

I changed a some things on your pastebin, and now it is working.

A few things to note:

• You missed to inject $timeout into the controller.
• You had the templateOptions nested inside templateOptions
• I might be missing something here, but I think ui-select-multiple is not a supported type by formly-bootstrap, so I used type: 'select' instead.
• When you use ngOptions is not necessary to use the other options, you are in full control of the render of the select.
• I did not use the optionsAttr since I was using the normal select, it points to ng-options by default.
• Check the Angular docs for ngOptions. It will help you understand how the Angular renders the select and its options.

[vukan71]

Thank you, I assumed that I missed something while coping to jsbin.

I tried to use http://angular-formly.com/#/example/integrations/ui-select-angular-1-4

Multiple Select + Async, both are on that same page. Both functionalities works perfectly when I use them separately, but not together.

[gillchristian]

Ohh sorry I totally missed that.

There should not be problems with multiple select + async, you were missing the setType definition, as well as the template for it and to reference ui-bootstrap and ui-select on the HTML file.

It works now.

Note that I am setting the default value after the options get returned, else there are some problems due to the way angular watches the ngOptions collection, read Complex Models (objects or collections) on the ngOptions docs.

[kentcdodds]

Thanks a ton for the help @gillchristian! @vukan71, because this appears to be more of a matter of help and support than a real bug or feature request, I'm going to close this issue. Feel free to continue discussion or move this to chat.angular-formly.com :+1:

[vukan71]

Thank you a lot @gillchristian :))))

[gillchristian]

No problem, I hope you got it to work!