AngularJS Dropdown Multiselect

Question

我正在尝试使用angularjs进行多项选择的下拉列表。 使用它们中的一个很好，但是如果我需要在同一个表单中使用2个下拉列表，它就不会被初始化。这是一个例子http://jsfiddle.net/vUSPu/1221/，任何善良的灵魂都可以指导我如何显示2个工作下拉列表？谢谢！

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

<div ng-app="myApp2" ng-controller="AppCtrl2">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


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 app2 = angular.module('myApp2', ['app.directives']);

app2.controller('AppCtrl2', 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;
            };                                 
       }
   } 
});

Answer 1

您的JSFiddle示例与您提供的代码略有不同。哪一个反映了你的需求？

JSFiddle解决方案

您正在重复ng-app="myApp"，因此当第二个代码运行时，myApp的AngularJS应用程序实例已经初始化。要解决这个问题，您可以删除第二个初始化并将第二个下拉列表放在第一个（也是唯一的）ng-app范围内。

问题解决方案代码

假设您希望在文档上运行两个不同的应用程序，则需要手动启动它，因为Angular将仅检测第一个。像这样：

<script>
  angular.bootstrap(document, ['myApp', 'myApp2']);
</script>