多选插件不显示任何选项

Posted 2023-05-08

【中文标题】多选插件不显示任何选项

【英文标题】：Multiple-select plugin not showing any options

【发布时间】：2019-08-29 06:07:11

【问题描述】：

我正在使用 ng-repeat 生成选项。我希望这些选项是多选的。因此，我正在使用 jquery 多选插件。但是如果我使用这个插件，我将看不到任何选项。

这是我的代码：

<select multiple="multiple" class="browser-default" name="userprofile" id="userprofile"
       ng-model="user.profile">
    <option ng-repeat="profile in userprofiles" value="profile.profile">
              profile.profile_name 
    </option>

<script type="text/javascript">
   $(document).ready(function()
        $('#userprofile').multipleSelect();
    );
</script>

【参考方案1】：

我已经使用下面的 js 文件进行多选。

'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope)                     
    $scope.roles = [
          "id": 1, "name": "Manager", "assignable": true,
          "id": 2, "name": "Developer", "assignable": true,
          "id": 3, "name": "Reporter", "assignable": true
    ];
    
    $scope.member = roles: [];
    $scope.selected_items = [];
);

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function()
   return 
       restrict: 'E',
       scope:           
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
       ,
       template: "<div class='btn-group' data-ng-class='open: open'>"+
        "<button class='btn btn-small'>Select</button>"+
                "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
                    "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                    "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                    "<li class='divider'></li>" +
                    "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>option.name<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
                "</ul>" +
            "</div>" ,
       controller: function($scope)
           
           $scope.openDropdown = function()        
                    $scope.selected_items = [];
                    for(var i=0; i<$scope.pre_selected.length; i++)                        $scope.selected_items.push($scope.pre_selected[i].id);
                                                            
            ;
           
            $scope.selectAll = function () 
                $scope.model = _.pluck($scope.options, 'id');
                console.log($scope.model);
            ;            
            $scope.deselectAll = function() 
                $scope.model=[];
                console.log($scope.model);
            ;
            $scope.setSelectedItem = function()
                var id = this.option.id;
                if (_.contains($scope.model, id)) 
                    $scope.model = _.without($scope.model, id);
                 else 
                    $scope.model.push(id);
                
                console.log($scope.model);
                return false;
            ;
            $scope.isChecked = function (id)                  
                if (_.contains($scope.model, id)) 
                    return 'icon-ok pull-right';
                
                return false;
            ;                                 
       
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>


<div ng-app="myApp" ng-controller="AppCtrl">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
    <pre>selected roles = selected_items | json</pre>
</div>