2

Доброго времени суток!

Собственно, вопрос в названии темы. Пожалуйста помогите. Спасибо.

    angular.module('myApp', ['ngMaterial'])
    .controller('harvestController', function($scope) {

        $scope.cur1 = null;
        $scope.cur2 = null;

        $scope.harvest1 = [{
          id: 0,
          name: 'абрикос'
        }, {
          id: 1,
          name: 'банан'
        }, {
          id: 2,
          name: 'виноград'
        }, {
          id: 3,
          name: 'груша'
        }, {
          id: 4,
          name: 'дыня'
        }];


        $scope.harvest2 = [{
          id: 0,
          name: 'apricot'
        }, {
          id: 1,
          name: 'banana'
        }, {
          id: 2,
          name: 'grapes'
        }, {
          id: 3,
          name: 'melon'
        }, {
          id: 4,
          name: 'pear'
        }];

    });

Пример: http://codepen.io/yeoman/pen/BKRZPN

1 ответ 1

2

Это поведение похоже на баг в md-select.

После просмотра исходного кода, было выявлено что в функции по поиску и выбору правильного option используется такая строчка:

 searchStr += String.fromCharCode(e.keyCode);

Весь код функции:

var searchStr = '';
var clearSearchTimeout, optNodes, optText;
var CLEAR_SEARCH_AFTER = 300;
self.optNodeForKeyboardSearch = function(e) {
  clearSearchTimeout && clearTimeout(clearSearchTimeout);
  clearSearchTimeout = setTimeout(function() {
    clearSearchTimeout = undefined;
    searchStr = '';
    optText = undefined;
    optNodes = undefined;
  }, CLEAR_SEARCH_AFTER);
  searchStr += String.fromCharCode(e.keyCode);//здесь преобразование из клавиши в символ
  var search = new RegExp('^' + searchStr, 'i');
  if (!optNodes) {
    optNodes = $element.find('md-option');
    optText = new Array(optNodes.length);
    angular.forEach(optNodes, function(el, i) {
      optText[i] = el.textContent.trim();
    });
  }
  for (var i = 0; i < optText.length; ++i) {
    if (search.test(optText[i])) {//Поиск элемента
      return optNodes[i];
    }
  }
};

Как видно, они не правильно преобразовывают код клавиши в символ (букву). Можете зависти issue на github

UPDATE

Если Вам необходимо использовать md-select уже сейчас, до обновления исходного кода angular-material, то можете использовать директивы, которая пофиксит данное поведение.

Пример на codepen.

angular.module('myApp', ['ngMaterial'])
  .controller('harvestController', function($scope) {

    $scope.cur1 = {
      val: null
    };
    $scope.cur2 = null;

    $scope.logKeyCode = function(e) {
      console.log(e.keyCode);
      console.log(String.fromCharCode(e.keyCode));
      console.log(e);
      var p = 0;
    }

    $scope.harvest1 = [{
      id: 0,
      name: 'абрикос'
    }, {
      id: 1,
      name: 'банан'
    }, {
      id: 2,
      name: 'виноград'
    }, {
      id: 3,
      name: 'груша'
    }, {
      id: 4,
      name: 'дыня'
    }];

    $scope.harvest2 = [{
      id: 0,
      name: 'apricot'
    }, {
      id: 1,
      name: 'banana'
    }, {
      id: 2,
      name: 'grapes'
    }, {
      id: 3,
      name: 'melon'
    }, {
      id: 4,
      name: 'pear'
    }];

  })
  .directive('fixMdSelect', function() {
    return {
      restrict: "A",
      controller: function($scope) {
        $scope.addNode = function(node) {
          $scope.nodes.push(node);
        };
        $scope.nodes = [];
      },
      link: function(scope, elem, attr) {

        elem.find('md-content').bind('keydown', function(event) {
          var search = new RegExp('^' + event.key, 'i');
          for (var i = 0; i < scope.nodes.length; i++) {
            var node = scope.nodes[i];
            if (search.test(node.text())) {
              node[0].focus();
            }
          }
        });
      },
    };
  })
  .directive('fixMdOption', function() {
    return {
      restrict: "A",
      require: "^^fixMdSelect",
      scope:true,
      link: function(scope, elem, attr, fixMdSelect) {
        scope.$parent.addNode(elem);
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.css" rel="stylesheet">
<link href="https://material.angularjs.org/1.1.0-rc1/docs.css" rel="stylesheet">


<body ng-app="myApp" ng-cloak>

  <div ng-controller="harvestController" layout="column" layout-align="center center">
    <p>При вводе первой русской буквы не находит и не выделяет найденное знчение:</p>
    <input ng-model='cur1.val'>
    <md-select fix-md-select placeholder="Найдите фрукт" ng-model="cur1.val"  style="width:200px;">
      <md-option fix-md-option ng-value="fruit.id" ng-repeat="fruit in harvest1">{{fruit.name}}</md-option>
    </md-select>
    {{cur1}}
    <p>При вводе первой английской буквы находит и выделяет найденное значение: </p>
    <md-select placeholder="Find fruit" ng-model="cur2" style="width:200px;">
      <md-option ng-value="fruit.id" ng-repeat="fruit in harvest2">{{fruit.name}}</md-option>
    </md-select>
  </div>

</body>

1
  • Спасибо, issue завел, будем ждать.
    – Mikhail
    Commented 24 мар. 2016 в 14:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.