AngularJS Dropdown Multiselect

Question

我試圖使用angularjs下拉選擇多個選項。 使用其中的1個效果很好，但如果我需要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"所以當第二代碼運行AngularJS應用實例myApp已初始化。爲了解決這個問題，你可以刪除第二個初始化，並將第二個下拉菜單放在第一個（也是唯一的）ng-app範圍內。

對問題的解決

代碼假設你想有兩個不同的應用在文檔上運行，你需要手動啓動它作爲角將檢測只是第一個。這樣的事情：

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