Focus md-checkbox personnalisé dans le contrôle md-select

Question

J'ai mis en place le contrôle de sélection avec sélectionner toutes les options, Quand j'ouvre le contrôle, il se concentre sur la première option. Je voudrais me concentrer sur l'option de sélection ou au moins désactiver la mise au point.

HTML

<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" > 
    <md-select md-selected-text="selectedText" ng-model="selectedToppings" multiple> 
    <div class="select-all-div" > 
      <md-checkbox class="select-selectAll" 
         >Select all</md-checkbox > </div> 
     <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option> 
    </md-select> 

JS

angular 
.module('selectDemoOptGroups', ['ngMaterial']) 
.controller('SelectOptGroupController', function($scope) { 

    $scope.toppings = [ 
    { category: 'meat', name: 'Pepperoni' }, 
    { category: 'meat', name: 'Sausage' }, 
    { category: 'meat', name: 'Ground Beef' }, 
    { category: 'meat', name: 'Bacon' }, 
    { category: 'veg', name: 'Mushrooms' }, 
    { category: 'veg', name: 'Onion' }, 
    { category: 'veg', name: 'Green Pepper' }, 
    { category: 'veg', name: 'Green Olives' } 
    ]; 
    $scope.selectedToppings = []; 


}); 

https://jsfiddle.net/AlexLavriv/ya6eu8kz/5/

Answer 1

Working Demo

Essayez cette façon ci-dessous

angular 
 
    .module('selectDemoOptGroups', ['ngMaterial']) 
 
    .controller('SelectOptGroupController', function($scope) { 
 

 
     $scope.toppings = [  
 
     { category: 'meat', name: 'Pepperoni' }, 
 
     { category: 'meat', name: 'Sausage' }, 
 
     { category: 'meat', name: 'Ground Beef' }, 
 
     { category: 'meat', name: 'Bacon' }, 
 
     { category: 'veg', name: 'Mushrooms' }, 
 
     { category: 'veg', name: 'Onion' }, 
 
     { category: 'veg', name: 'Green Pepper' }, 
 
     { category: 'veg', name: 'Green Olives' } 
 
     ]; 
 
     $scope.toppings.unshift({ category: 'select', name: 'Select all' }) 
 
     $scope.selectedText = $scope.toppings[0].name; 
 
     
 
    
 
    });

.select-selectAll{ 
 
text-align: left; 
 
    padding-left: 10px; 
 
    /* padding-right: 16px; */ 
 
    display: flex; 
 
    cursor: pointer; 
 
    position: relative !important; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    width: 95%; 
 
    -webkit-transition: background .15s linear; 
 
    transition: background .15s linear; 
 
    /* padding: 0 16px; */ 
 
    height: 48px; 
 
} 
 

 

 
.select-selectAll div.md-icon{ 
 
    left:10px; 
 
} 
 

 

 

 
    .select-all-div:hover{ 
 
    background: rgb(238,238,238); 
 
    }

<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" > 
 
     <md-select md-selected-text="selectedText" ng-model="selectedToppings" multiple>   
 
      <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option> 
 
     </md-select> 
 
</div>

Answer 2

Vous ne pouvez pas utiliser un div pour seul opotion et options pour le reste. Vous pouvez utiliser la même option pour afficher l'option sélectionnez tout.

<md-select> 
    <md-option>Select all</md-option> 
    <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option> 
</md-select> 

travail Démo: JSFiDDLE