автозаполнение с помощью angularjs (не в состоянии получить входное значение)

Question

У меня есть следующий plunker прилагается http://plnkr.co/edit/NPpjRM54vPu56GH9N1kI?p=preview

Как вы можете видеть, есть список доступных тегов. Если я пишу 'a' в поле ввода, несколько элементов автозаполнения отображаются ниже.

Если я продолжайте печатать, я могу видеть, что я напечатал рядом с ним, используя приведенный ниже код

<input id="tags" ng-keyup="complete()" ng-model="data" /> selected = {{data}} 

Но вместо того, чтобы печатать, я просто выберите «ActionScript» в раскрывающемся списке из автозаполнения, он оленья кожа обновляется к ng-модели.

Может кто-нибудь дать мне знать, как выбрать из выпадающего списка, и обновить его до ng-модели.

Answer 1

Согласно документации Autocomplete, есть «выбрать» событие, которое будет делать то, что вам нужно:

$("#tags").autocomplete({ 
    source: $scope.availableTags, 
    select: function(event, ui) { 
    $scope.data = ui.item.value; 
    } 
}); 

Это сделает значение $ scope.data изменить после того, как вы сосредоточитесь из поля. Если вы хотите, чтобы немедленно распространить изменения, вы можете использовать 0 второй $ таймаут, например, так:

$("#tags").autocomplete({ 
    source: $scope.availableTags, 
    select: function(event, ui) { 
    $timeout(function() { $scope.data = ui.item.value; }, 0); 
    } 
}); 

Имейте в виду, что вам нужно впрыснуть $ таймаут в контроллере:

app.controller('ctrl',function($scope, $timeout){ ... }); 

Working пример: http://plnkr.co/edit/3rstgrTQJp5voYEJdo2C?p=preview