Javascript 选择后，文本框中的AngularJS建议文本不清除_Javascript_Angularjs

Javascript 选择后，文本框中的AngularJS建议文本不清除

javascript angularjs

Javascript 选择后，文本框中的AngularJS建议文本不清除,javascript,angularjs,Javascript,Angularjs,我正在使用AngularJS构建一个包含建议文本的文本框。我的页面上有一个文本框，我想要的是每当用户开始输入内容时，弹出一些建议，用户可以选择一个将写入文本框的选项。值列表来自数据库。我让这部分工作，但有一件事仍然给我带来问题-一旦用户开始键入，列表就会出现，并允许用户选择一个值。但一旦在列表中选择该值并填充到文本框中，可能值的列表仍会显示。有没有办法在不清除文本框中的值的情况下隐藏它 <!DOCTYPE html> <html xmlns="http://www.w3.o

我正在使用AngularJS构建一个包含建议文本的文本框。我的页面上有一个文本框，我想要的是每当用户开始输入内容时，弹出一些建议，用户可以选择一个将写入文本框的选项。值列表来自数据库。我让这部分工作，但有一件事仍然给我带来问题-一旦用户开始键入，列表就会出现，并允许用户选择一个值。但一旦在列表中选择该值并填充到文本框中，可能值的列表仍会显示。有没有办法在不清除文本框中的值的情况下隐藏它

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="TextApp">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-mocks.js"></script>
    <script type="text/javascript" src="BaseCtrl.js"></script>

</head>
<body ng-controller="BaseController">
    <div class="input-group" style="width: 50%;">
        <input type="text" class="form-control" id="FirstName" ng-model="fnamequery">
        <p id="pfname" ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery==''"><a ng-href="" ng-click="GetSuggestion(fname)">{{fname}}</a></p>

    </div>
</body>
</html>

试一试

<body ng-controller="BaseController">
<div class="input-group" style="width: 50%;">
    <input type="text" class="form-control" id="FirstName" ng-model="fnamequery" ng-change="fnamePicked = false;">
    <p id="pfname" ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery=='' || fnamePicked"><a ng-href="" ng-click="GetSuggestion(fname)">{{fname}}</a></p>

</div>

编辑：

你为什么不能使用angularjs已经存在的许多自动完成功能中的一个呢？

cDecker32，我考虑过，但首先想自己尝试一下，angularjs的一般经验法则是尝试使用内置的Angular指令执行所有DOM操作。当你开始尝试把jQuery放进去的时候，这些东西可能会变得超级时髦。我正在考虑试用角度材质auto Complete。我最近开始摆弄它，它很不错。

<body ng-controller="BaseController">
<div class="input-group" style="width: 50%;">
    <input type="text" class="form-control" id="FirstName" ng-model="fnamequery" ng-change="fnamePicked = false;">
    <p id="pfname" ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery=='' || fnamePicked"><a ng-href="" ng-click="GetSuggestion(fname)">{{fname}}</a></p>

</div>

 angular.module('TextApp', []).controller('BaseController', function($scope, $http) {
$scope.fnames = [];
$scope.fnamequery = '';
$scope.fnamePicked = false;

 $http.get('http://localhost:49358/api/myClasses/GetAllNames/').
    then(function (response) {
        $scope.fnames = response.data;
    }, function errorCallback(error) {
        //print error to console.
        console.log(error);
    });

    $scope.GetSuggestion = function (strname) {
        $scope.fnamequery = strname;
            $scope.fnamePicked = true;
    }
});