Question

我正在使用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;
    }
});

Answer 1

试一试

<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已经存在的许多自动填充中的一个吗？

选择完成后，文本框中的AngularJS建议文本无法清除

1 个答案: