Angular - 在編輯角色未選中

Question

有用戶角色。 $scope.allRoles，我將多個角色分配給用戶user.roles。

 <label class="col-md-4" >Roles</label> 
     <div class="col-md-8"> 
      <select multiple="true" ng-model="user.roles" ng-options="r.name for r in allRoles"></select> 
     <div> 

但是當我編輯用戶 - 預先分配的角色應該突出顯示，但它不會。

MultiSelect Dropdown中的角色應該突出顯示。任何人都可以指導我。 感謝 Image of the MultiSelect Here

Answer 1

此鏈接將可以幫助你http://jsfiddle.net/jaredwilli/vUSPu/

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

和app.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 = [1,3]; 
}); 

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; 
      };         
     } 
    } 
});