在md-select控件中自定義md-checkbox

Question

我已經實現了選擇控件並選擇了所有選項，當我打開控件時，它將重點放在第一個選項上。我想專注於選擇選項或至少禁用焦點。

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

試試這個方法在下文

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

不能使用對於其餘單opotion和options一個div。您可以使用相同的選項來顯示選項全選。

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

工作演示：JSFiDDLE