My Bootstrap Multiselect is empty

Question

I have installed the bower component in my angularjs application, I have a multiselect

 <select class="multiselect" id="mdf.modifier.id" multiple="multiple" >
      <option disabled selected value> -- select {{mdf.modifier.max == 1 ? 'one' : 'multiple' }} -- </option>
      <option ng-repeat="option in mdf.options" value="option.id" track by option.id>
       {{ option.name | highlight:for_user }}, +{{ option.price }}
      </option>
  </select>

And calling the javascript method from my controller

$('.multiselect').multiselect();

My multiselect is getting out as an empty multiselect. The ng-repeat does print some options I have checked.

I would avoid using `JQuery` and use the native `multiple` option from [ng-select](https://docs.angularjs.org/api/ng/directive/select) — Jax, Mar 02 '17 at 12:13
Please dont delete your question again, you did this 2 times yesterday -.- Big dislike for that action! — lin, Mar 02 '17 at 12:15

score 1 · Accepted Answer · edited May 23 '17 at 10:29

Switch to angular-ui bootstrap and you will be fine. Throw jQuery out of your application. Finaly it should work like in this simple fiddle. Please check this "Thinking in AngularJS way" to learn more about not mixing jQuery with AngularJS.

View

<div ng-app="app" ng-controller="myCtrl">      
   <ui-select multiple ng-model="selected" theme="bootstrap" close-on-select="false" title="Choose a person">
    <ui-select-match placeholder="Pick some ..">{{$item.value}}</ui-select-match>
    <ui-select-choices repeat="val in values track by val.value">
      <div ng-bind="val.value | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

AnuglarJS Application

var app = angular.module('app', ['ui.select']);

app.controller("myCtrl", function ($scope) {

    $scope.values = [{
        'key': 22,
        'value': 'Kevin'
    }, {
        'key': 24,
        'value': 'Fiona'
    }];

    $scope.selected = null;
});

My Bootstrap Multiselect is empty

1 Answers1

View

AnuglarJS Application