Cadre élément sélectionné dans md-select angulaire avec de multiples options

Question

Cadre élément sélectionné dans angulaire md-select avec option multiple

<md-select multiple ng-model="Reg.roles" placeholder="Please select roles" required> 
    <md-option ng-repeat="role in roles" value="{{role.value}}" ng-selected="{{ role.value === '<%= data.roles %>' ? 'true' : 'false' }}">{{ role.name }}</md-option> 
</md-select> 

dans mon contrôleur

$scope.roles = [{ 
     "name": "Account Admin", 
     "value": "account_admin" 
    }, { 
     "name": "Developer", 
     "value": "developer" 
    }, 


    { 
     "name": "Analyst", 
     "value": "analyst" 
    } 
]; 

en vue

data.roles contient la valeur:

['account_admin', 'developer'] 

J'ai besoin l'élément correspondant à role.value doit être en état sélectionné.

Référez image ci-dessous

Answer 1

Enfin j'ai trouvé la solution, dans mon contrôleur je l'ai écrit ceci:

var current_roles  = '<%=data.roles%>'; // current value from db as array 

$scope.Reg.roles = []; //initialize array 

angular.forEach($scope.roles, function(val1, key1) { 
    if(current_roles.indexOf(val1['value']) !== -1) // check if item in current array 
    { 
     $scope.Reg.roles.push(val1['value']); //setting to select items 
    } 
}); 

Answer 2

Je ne sais pas comment valide c'est ou si cette attaque le même problème, mais une autre chose que vous pourrait faire est que dans votre code HTML, passer dans le rôle au lieu de role.value. Donc, il ressemblerait à quelque chose comme ceci:

<md-select multiple ng-model="Reg.roles" placeholder="Please select roles" required> 
<md-option ng-repeat="role in roles" value="{{role}}" ng-selected="{{ role.value === '<%= data.roles %>' ? 'true' : 'false' }}">{{ role.name }}</md-option> 

Cela vous permet de travailler avec l'objet entier dans votre contrôleur et vous pouvez le manipuler comme vous le souhaitez.