Упреждающий выбор AngularJS при размытии

Я с EnigmaRM в том, что ngBlur, кажется, способ делать то, что вы хотите. Однако я согласен с другими, что это может быть несколько странно для конечных пользователей. Моя реализация ниже (и в plnkr). Обратите внимание, что я запускаю ngBlur, но применяю модель только тогда и только тогда, когда есть только одно совпадение от Bloodhound, и совпадение является точным. Я думаю, что это, вероятно, лучшее из обоих миров, и надеюсь, что это даст вам достаточно, чтобы продолжать.

$scope.validateValue = function() {
  typedValue = $scope.selectedNumber;
  if(typedValue.num !== undefined && typedValue.num !== null)
  {
    return;
  }
  numbers.get(typedValue, function(suggestions) {
    if(suggestions.length == 1 && suggestions[0].num === typedValue) {
      $scope.selectedNumber = suggestions[0];
    }
  });
};

Я не уверен, что хотел бы иметь такую ​​​​функциональность в своем приложении. Пользователь на самом деле ничего не выбрал. Так что выбор чего-то для них вызовет разочарование.

Но я понимаю, что часто нужны странные требования. В этом случае я бы атаковал его, используя ngBlur. Назначьте функцию, которая будет вызываться при размытии. Вы можете получить содержимое ng-model, а затем просмотреть свои данные (при условии, что они статические и не отправляются через сервер), чтобы найти совпадение.

Скорее всего, вы можете просто посмотреть исходный код вашей директивы typeahead и вырезать часть, которая выполняет сравнение, а затем выбрать первый элемент в массиве.

К сожалению, базовый компонент не генерирует никаких событий для этого условия. Это усложнит решение. Однако, когда значение вводится и происходит волшебство Typehead, вы можете дополнить эти события и перехватить их, чтобы обновить свой ngModel.

Я создал plnkr на основе вашего plnkr и, хотя не очищал, но это рабочий plnkr делать то, что вам нужно.

Суть этого заключается в следующем коде, однако вы можете разместить этот код там, где он лучше всего подходит
Объяснение ниже:

          //Crux - this gets you the Typeahead object 
          var typeahead = element.data('ttTypeahead');              

          //This gets you the first
          var datum = typeahead.dropdown.getDatumForTopSuggestion();

          if (datum){
            //you can do lot of things here however 
            //..I tried to - fill in the functionality best suited to be provided by Typeahead
            //for your use case. In future if Typeahead gets this 
            //..feature you could remove this code
            typeahead.eventBus.trigger("hasselections", datum.raw, datum.datasetName);
          } 

В приведенном выше коде вы также можете сохранить датум где-нибудь в области видимости, чтобы потом делать с ним все, что захотите. По сути, это ваш объект {num: 'Six'} Затем вы также можете использовать ngBlur, чтобы установить его где-нибудь (однако созданный мной plnkr не нуждается в этих уловках.)

Затем дальше вниз - значение ngModel устанавливается, как показано ниже.

   element.bind('typeahead:hasselections', function(object, suggestion, dataset) {
      $timeout(function(){
        ngModel.$setViewValue(suggestion);
      }, 1);
      //scope.$emit('typeahead:hasselections', suggestion, dataset);
    });