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

我正在使用AngularJS构建带有建议文本的文本框。我的页面上有一个文本框，我想要的小麦是用户开始输入内容时弹出的一些建议，用户可以在其中选择将写入文本框的选项。值的列表来自数据库。我得到了这部分工作，但有一件事仍然给我的问题 - 一旦用户开始打字，列表出现，并允许用户选择一个值。但是，一旦在列表中选择了该值并将其填充到文本框中，则可能的值列表仍会显示。有没有办法在不清除文本框中的值的情况下隐藏它？选择后，文本框中的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>

和我的控制器是在这里：

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

$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; 
    } 
});

来源

2016-03-04 ElenaDBA

这给了一枪

<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; 
    } 
});

编辑：你不能使用的一处任何理由已经自动完成了存在为angularjs？

来源

2016-03-04 22:16:50 cDecker32

cDecker32，我想过它，但首先想给它一个尝试我自己 – ElenaDBA

公平的，angularJS的一般经验法则是尝试使用内置的Angular指令来执行所有DOM操作。当你开始尝试将jQuery放在那里时，东西可能会变得非常怪异。 – cDecker32

我正在考虑尝试角度材料自动完成 – ElenaDBA

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

回答

相关问题