Угловой материал: md-select-header внутри вкладки не работает

У меня возникли проблемы с этой проблемой.Угловой материал: md-select-header внутри вкладки не работает

Я использую:

Угловая Материал 1.1.0
Угловое 1.5.5

Проблема возникает, когда я поставил мкр-выберите внутри мкр-закладках то заголовок md-select (поле поиска) больше не работает. Я не очень хорошо разбираюсь в вещах, поэтому просто посмотри кодекс.

http://codepen.io/aldesabido/pen/GZGRBR

Это работает, когда я делаю это.

<md-select multiple=""> 
    <md-select-header> 
    <input type="search"> 
    </md-select-header> 
    <md-optgroup label="vegetables"> 
    <md-option></md-option> 
    </md-optgroup> 
</md-select>

но нет, когда я это делаю.

<md-tabs md-dynamic-height md-border-bottom> 
<md-tab label="Vegetable Tabs"> 
    <md-subheader class="subheader"> 
     <md-select multiple=""> 
      <md-select-header> 
       <input type="search"> 
      </md-select-header> 
      <md-optgroup label="vegetables"> 
       <md-option></md-option> 
      </md-optgroup> 
     </md-select> 
    </md-subheader> 
</md-tab>

Пожалуйста, спросите меня, если вы хотите другую информацию. Благодарю.

источник

2016-04-19 aldesabido

Я испытываю подобную проблему при попытке поставить 'md-select' в' md-chip-template'. Я думаю, 'md-select-header' - это то, как он сломан, когда он вложен – kavare

Причина этого заключается в том, что элемент <input> распространяется по keydown событиям до md-select, где md-select по умолчанию выбирает пункт меню, который соответствует символу.

Привязывание обработчика событий для ввода и прекращения распространения события сделало бы трюк.

// MdSelectTemplate.html 
<div ng-controller="MdSelectController as vm"> 
    <md-select> 
     <md-input-container> 
     <input ng-model="vm.filterQuery" ng-keydown="vm.onSearchChange($event)"> 
     </md-input-container> 
     <md-option ng-repeat="item in vm.items track by item.id" ng-value="item.id"> 
    </md-select> 
</div> 

// MdSelectController.js 
vm.filterQuery = ''; 
vm.items = []; 
vm.onSearchChange = function(event) { 
    event.stopPropagation(); 
}

Престижность @dmaslov

А вот официальная нить https://github.com/angular/material/issues/4239

источник

2016-05-29 00:49:17 kavare

добавить ng-keydown="$event.stopPropagation()"

передать этот пример

<html lang="en" > 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Angular Material style sheet --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css"> 
 

 
    <style> 
 
    .selectdemoSelectHeader .demo-header-searchbox { 
 
     border: none; 
 
     outline: none; 
 
     height: 100%; 
 
     width: 100%; 
 
     padding: 0; 
 
    } 
 
    .selectdemoSelectHeader .demo-select-header { 
 
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); 
 
     padding-left: 10.667px; 
 
     height: 48px; 
 
     cursor: pointer; 
 
     position: relative; 
 
     display: flex; 
 
     align-items: center; 
 
     width: auto; 
 
    } 
 
    .selectdemoSelectHeader md-content._md { 
 
     max-height: 240px; 
 
    } 
 
    </style> 
 
</head> 
 
<body ng-app="Vegetables" ng-cloak> 
 
    <div ng-controller="vegetables"> 
 
    <md-tabs> 
 
     <md-tab label="Plase Search "> 
 
     <md-input-container class="md-block" flex> 
 
      <label>Vegetables</label> 
 
      <md-select 
 
      multiple 
 
      ng-model="selectedVegetables" 
 
      md-on-close="clearSearchTerm()" 
 
      data-md-container-class="selectdemoSelectHeader"> 
 
      <md-select-header class="demo-select-header"> 
 
       <input 
 
       type="search" 
 
       ng-model="searchTerm" 
 
       placeholder="Search.." 
 
       class="demo-header-searchbox md-text" ng-keydown="$event.stopPropagation()"> 
 
      </md-select-header> 
 
      <md-optgroup label="vegetables"> 
 
       <md-option 
 
       ng-value="vegetable" 
 
       ng-repeat="vegetable in vegetables | filter:searchTerm"> 
 
        {{vegetable}} 
 
       </md-option> 
 
      </md-optgroup> 
 
      </md-select> 
 
     </md-input-container> 
 
     </md-tab> 
 
    </md-tabs> 
 
    </div> 
 

 
    <!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script> 
 

 
    <!-- Your application bootstrap --> 
 
    <script type="text/javascript"> 
 
    /** 
 
    * You must include the dependency on 'ngMaterial' 
 
    */ 
 
    angular 
 
     .module('Vegetables', ['ngMaterial']) 
 
     .controller('vegetables', function($scope, $element) { 
 
     $scope.vegetables = [ 
 
      'Corn', 
 
      'Onions', 
 
      'Kale', 
 
      'Arugula', 
 
      'Peas', 
 
      'Zucchini' 
 
     ]; 
 

 
     $scope.searchTerm; 
 

 
     $scope.clearSearchTerm = function() { 
 
      $scope.searchTerm = ''; 
 
     }; 
 

 
     // The md-select directive eats keydown events for some quick select 
 
     // logic. Since we have a search input here, we don't need that logic. 
 
     $element.find('input').on('keydown', function(ev) { 
 
      ev.stopPropagation(); 
 
     }); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

источник

2017-01-13 06:53:26

Угловой материал: md-select-header внутри вкладки не работает

ответ

Смежные вопросы