使用 angularjs 自动完成（无法获取输入值）

Question

我附上了以下插件 http://plnkr.co/edit/NPpjRM54vPu56GH9N1kI?p=preview

如您所见，有一个可用标签列表。如果我在输入字段中写 'a'，下面会显示几个自动完成项目。

如果我继续打字，我可以使用下面的代码在旁边看到我打的内容

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

但是我没有输入，只是 select 'ActionScript' 在自动完成的下拉列表中，它没有更新为 ng-model。

谁能告诉我如何从下拉列表中 select 并将其更新为 ng-model。

Answer 1

根据自动完成文档，有一个 "select" 事件可以满足您的需要：

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

这将使 $scope.data 的值在您将焦点移出字段后发生变化。如果您想立即传播更改，您可以使用 0 秒 $timeout，如下所示：

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

请记住，您需要在控制器中注入 $timeout：

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

工作示例：http://plnkr.co/edit/3rstgrTQJp5voYEJdo2C?p=preview

使用 angularjs 自动完成（无法获取输入值）

autocomplete using angularjs (not able to get input value)

javascript

autocomplete

angularjs

angular-ngmodel