选择后,文本框中的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;
}
});
答
这给了一枪
<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?
cDecker32,我想过它,但首先想给它一个尝试我自己 – ElenaDBA
公平的,angularJS的一般经验法则是尝试使用内置的Angular指令来执行所有DOM操作。当你开始尝试将jQuery放在那里时,东西可能会变得非常怪异。 – cDecker32
我正在考虑尝试角度材料自动完成 – ElenaDBA