Question

我在角度项目中使用bootstrap typeahead。我的要求是当用户没有输入任何文本时通过按下键来打开预先输入下拉菜单。我已使用this link成功添加了此功能。这是我的demo。

现在向下键打开下拉列表，因此它会失去遍历下拉列表的默认行为（向下移动到下一个选项）。

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
    <script src="ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <input type="text" ng-keydown="show($event)" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
      <pre ng-show="opened">Model: {{selected | json}}</pre>
    </div>
  </body>

</html>

的script.js

(function () {
  var secretEmptyKey = '[$empty$]'

  angular.module('plunker', ['ui.bootstrap'])
    .directive('emptyTypeahead', function () {
      return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
          // this parser run before typeahead's parser
          modelCtrl.$parsers.unshift(function (inputValue) {
            var value = (inputValue ? inputValue : secretEmptyKey); // replace empty string with secretEmptyKey to bypass typeahead-min-length check
            modelCtrl.$viewValue = value; // this $viewValue must match the inputValue pass to typehead directive
            return value;
          });

          // this parser run after typeahead's parser
          modelCtrl.$parsers.push(function (inputValue) {
            return inputValue === secretEmptyKey ? '' : inputValue; // set the secretEmptyKey back to empty string
          });
        }
      }
    })
    .controller('TypeaheadCtrl', function($scope, $http, $timeout) {
      $scope.selected = undefined;
      $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

      $scope.stateComparator = function (state, viewValue) {
        return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
      };

      $scope.show = function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 40) { //If it's the down key
            $timeout(function () {
                $(e.target).triggerHandler('input');
            });
        }
    };

    });
}());

有没有办法在第一次点击时打开下拉菜单，如果再次点击则转到下一个选项？

Answer 1

最后，我通过在打开typeahead下拉时设置if条件来解决问题。

$scope.show = function (e) {
    if($scope.selected === undefined){
      var keyCode = e.keyCode || e.which;
      if (keyCode == 40) { //If it's the down key
        $timeout(function () {
            $(e.target).triggerHandler('input');
        });
     }
   }
};

如果用户未选择任何项目，则在undefined中提供$scope.selected：

$scope.clearIfEmpty = function () {
    if($scope.selected !== undefined && $scope.selected.length === 0){
      $scope.selected = undefined;  
    }
}

Fix in action

首先单击向下键，然后遍历下拉列表，打开预先输入

1 个答案: