12

我使用了 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 在这个输入选择中时，它不起作用并且没有打印任何数据。有哪位大神知道怎么解决这个问题，请帮帮我！！

4

4 回答 4

10

如果你使用 bootstrap-multiselect 你应该使用 ng-options 属性，就像在@user2598687 答案中一样。这里版本的小提琴适用于 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"}];
于 2014-02-07T15:10:57.360 回答
6

您可以尝试查看问题，https://github.com/davidstutz/bootstrap-multiselect/issues/128和 js fiddle，http://jsfiddle.net/58Bu3/1/，因为两者都与将 Angular js 与 bootstrap-multiselect 一起使用。这是我在创建小提琴时使用它的方式。

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

该示例是一个有效的示例，因此请继续尝试。

于 2013-07-19T08:48:27.230 回答
0

我刚刚处理了这个问题！！您可以使用以下方式动态添加选项，而不是尝试使用 ng-repeat：

var topicSelect = document.getElementById("topic-select");

for (topic in scope.topicList) {
    topicSelect.add(new Option(scope.topicList[topic], scope.topicList[topic]));
}
于 2015-07-24T05:59:34.217 回答
0

我自己一直在寻找多选下拉菜单。我使用 Long2Know 自己完成了这个解决方案。我什至在 UI Modal 中获得了多选，这是我最初的目标。

var myApp = angular.module('myApp', ['long2know', 'ui.bootstrap']);

myApp.controller('testCtr', function($scope, $uibModal) {
  $scope.test = function() {
    $scope.colors = [{
      name: 'black'
    }, {
      name: 'white'
    }, {
      name: 'red'
    }, {
      name: 'blue'
    }, {
      name: 'purple'
    }, {
      name: 'pink'
    }, {
      name: 'brown'
    }, {
      name: 'yellow'
    }];

    $uibModal.open({
      template: "<multiselect class='input-xlarge multiselect' ng-model='myColor' options='color.name for color in colors' multiple='true' required enable-filter='true' filter-placeholder='Filter stuff..'></multiselect>",
      controller: 'newCtrl',
      resolve: {
        colors: function() {
          return $scope.colors;
        }
      }
    });
  }
});

myApp.controller('newCtrl', function($scope, colors) {
  $scope.colors = colors;
});

普朗克

于 2016-05-05T13:00:14.307 回答