Bootstrap multiselect下拉列表中的AngularJS ng-repeat

Question

我使用Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/并嵌入到AngularJS的子模板中并让它运行以下函数:

$scope.$on('$viewContentLoaded', function () {
    $(document).ready(function() {
        $('#example27').multiselect({
            includeSelectAllOption: true
        });
    });
});

我继续使用ng-repeat打印此输入选择的内部选项:

    <select id="example27" multiple="multiple">
        <option ng-repeat="list in lists" value="{{list.id}}">{{list.name}}</option>
    </select>

但是当ng-repeat在此输入选择中时,它不起作用并且不打印任何数据.谁知道如何解决这个问题,请帮帮我!

Answer 1

如果使用bootstrap-multiselect,则应使用ng-options属性,例如@ user2598687 answer.这里适用于firefox的小提琴版本:点击我查看jsfiddle

<select class="multiselect" data-placeholder="Select Products" 
  ng-model="productSelection" ng-options="item.id as item.name for item in Products"
  multiple="multiple" multiselect-dropdown >
$scope.Products = [{id:1,name:"Apple"}, {id:2,name:"Banana"}, {id:3,name:"Carrort"}, {id:4,name:"Dart"}];

Answer 2

你可以尝试看看这个问题,https://github.com/davidstutz/bootstrap-multiselect/issues/128和js小提琴,http://jsfiddle.net/58Bu3/1/两者都与使用带有bootstrap-multiselect的角度js.这是我如何使用它来创建小提琴.

<select class="multiselect" data-placeholder="Select Products" 
            ng-model="productSelection" ng-options="item as item for item in Products"
            multiple="multiple" multiselect-dropdown >

            </select>
<p>Selection: {{productSelection}}</p>

这个例子是一个工作的例子,所以继续尝试吧.