0

I am working with the bootstrap-multiselect control. I need to execute multiselect() on a select element once all of the options have been populated by Angular.

Here is the select box, bound to a $scope property, with the options generated from an array of accountInfo objects snippet from my view:

<select id="property" multiple="multiple" 
    ng-model="selectedProperty" 
    ng-options="account.property_name group by account.client_name for account in accountInfo">
</select>

So once the options exist, I need to call $("#property").multiselect() to generate the bootstrap control, but I am looking for an event to listen for that tells me when all the options have been generated.

Hoa
  • 3,179
  • 1
  • 25
  • 33
DShultz
  • 4,381
  • 3
  • 30
  • 46
  • 1
    Possible duplicate of [ng-repeat finish event](http://stackoverflow.com/questions/13471129/ng-repeat-finish-event) – David L Apr 18 '17 at 18:26
  • You should use a directive for this instead. Also, are you sure that ` – mhodges Apr 18 '17 at 19:38
  • ng-model works with select multiple well as long as the model is an array - how would a directive be structured to determine when the last option is written? – DShultz Apr 18 '17 at 20:00

1 Answers1

1

Instead of initializing bootstrap-multiselect control in a controller, do it in a directive link() function which is called after the corresponding element is rendered.

app.directive('multiselect', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.multiselect();
    }
  };
});

Here's a demo.

Hoa
  • 3,179
  • 1
  • 25
  • 33
  • Thanks - I'll give you credit since it does answer the question as written. I should have mentioned that the data bound to the ddl is asynchronous, and bound long after the link function executes. I've coded it up to use an $interval to check for the existence of the model data for now, but feel free to let me know if you have a better idea. – DShultz Apr 19 '17 at 20:41