Переопределение по умолчанию поведения по умолчанию

Question

Я пытаюсь переопределить поведение по умолчанию для функции bootstrap typeahead. В соответствии с текущим поведением выбранный элемент выбирается, когда я нажимаю вкладку, как показано ниже: link.

Чтобы перейти к следующему элементу, скажите еще одно текстовое поле рядом с ним, мне нужно снова нажать вкладку. Я хочу, чтобы текущий элемент был выбран, а следующий элемент выделен только на одной вкладке. Я использую angularjs и bootstrap.

Я попытался следующий код:

$scope.focusNext = function() { setTimeout(function() { $('#nextTextBox').focus(); }, 20); };

и на первом текстовом поле добавили следующий атрибут:

typeahead-on-select='focusNext()'

Это работает, но я не хочу, чтобы установить тайм-аут, но ищет более элегантное решение проблемы. ТИА

Answer 1

Вы можете написать директиву, как этот:

var myModule = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
myModule.controller('TypeaheadCtrl', function($scope, $http) { 
 

 
    $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']; 
 
}); 
 
myModule.directive('ignoreTab', function($timeout) { 
 

 
    function link(scope, element, attrs) { 
 
    element.bind('keydown', function (evt) { 
 
     if (evt.which === 9) { 
 
     scope.$evalAsync(function() { 
 
      element.nextAll('input').first().focus(); 
 
     }); 
 
     } 
 
    }); 
 
    } 
 

 
    return { 
 
    link: link 
 
    }; 
 
});

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js"></script> 
 

 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="ui.bootstrap.demo" class="container-fluid" ng-controller="TypeaheadCtrl"> 
 
    <h4>Static arrays</h4> 
 
    <pre>Model: {{selected | json}}</pre> 
 
    <input ignore-tab="" typeahead-focus-first="true" type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" /> 
 
    <h4>Custom templates for results</h4> 
 
    <pre>Model: {{customSelected | json}}</pre> 
 
    <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" /> 
 
</div>