選擇後，文本框中的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建議文本不會清除

回答

相關問題