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

您不能将 div 用于单个选项和options其余部分。您可以使用相同的选项来显示选项全选。

<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

Answer 2

工作演示

试试下面的方法

   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>