我的 Bootstrap 多选是空的

Question

我已经在我的 angularjs 应用程序中安装了 bower 组件，我有一个多选

 <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>

并从我的控制器调用 javascript 方法

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

我的多选结果显示为空多选。 ng-repeat 确实打印了一些我检查过的选项。

Answer 1

切换到 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" 以了解有关不将 jQuery 与 AngularJS 混合使用的更多信息。

查看

<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>

AngularJS 应用程序

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;
});

我的 Bootstrap 多选是空的

My Bootstrap Multiselect is empty

angularjs

bootstrap-multiselect

查看

AngularJS 应用程序