我正在尝试实现 this
它是自动完成标签输入小部件，
这是html代码:
<!DOCTYPE html>
<html lang="en" ng-app="com.htmlxprs.autocomplete">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Angular Autocomplete Tag Input</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="TagController">
<div class="row">
<div class="col-xs-4 col-xs-offset-4 top-buffer">
<div auto-complete url="/search" model="data.tags"></div>
</div>
</div>
</div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
这是指令中使用的 autocomplete-template.html 模板:
<div class="tags-wrapper">
<div id="tagsList" class="tags-cloud">
<input type="text" placeholder="Start typing"
id="searchInput"
ng-keydown="checkKeyDown($event)"
class="form-control"
ng-model="searchText"
ng-change="search()"/>
<div ng-repeat="selectedTag in selectedTags" class="tag">
<span class="tagName">{{selectedTag}}</span>
<span> <b ng-click="removeTag($index)" class="fa fa-times cross"></b></span>
</div>
</div>
<ul id="suggestions" class="suggestions-list">
<li ng-repeat="suggestion in suggestions"
class="blockSpan"
ng-click="addToSelectedTags($index)"
ng-mouseover="$parent.selectedIndex=$index"
ng-class="{active : selectedIndex===$index}">{{suggestion}}
</li>
</ul>
这是js代码:
angular.module('com.htmlxprs.autocomplete',['com.htmlxprs.autocomplete.directives','com.htmlxprs.autocomplete.controllers']);
angular.module('com.htmlxprs.autocomplete.directives',[]).directive('autoComplete',['$http',function($http){
return {
restrict:'AE',
scope:{
selectedTags:'=model'
},
templateUrl:'/views/autocomplete-template.html',
link:function(scope,elem,attrs){
scope.suggestions=[];
scope.selectedTags=[];
scope.selectedIndex=-1;
scope.resetList = function(index) {
scope.suggestions=[];
}
scope.removeTag=function(index){
scope.selectedTags.splice(index,1);
}
scope.search=function(){
$http.get(attrs.url+'?term='+scope.searchText).success(function(data){
if(data.indexOf(scope.searchText)===-1){
data.unshift(scope.searchText);
}
scope.suggestions=data;
scope.selectedIndex=-1;
});
}
scope.addToSelectedTags=function(index){
if(scope.selectedTags.indexOf(scope.suggestions[index])===-1){
scope.selectedTags.push(scope.suggestions[index]);
scope.searchText='';
scope.suggestions=[];
}
}
scope.checkKeyDown=function(event){
if(event.keyCode===40){
event.preventDefault();
if(scope.selectedIndex+1 !== scope.suggestions.length){
scope.selectedIndex++;
}
}
else if(event.keyCode===38){
event.preventDefault();
if(scope.selectedIndex-1 !== -1){
scope.selectedIndex--;
}
}
else if(event.keyCode===13){
scope.addToSelectedTags(scope.selectedIndex);
}
}
scope.$watch('selectedIndex',function(val){
if(val!==-1) {
scope.searchText = scope.suggestions[scope.selectedIndex];
}
});
}
}}]);
这很有效，但有一个小问题，如果您开始输入并得到一些结果，并决定不选择其中任何一个，而是移至屏幕的另一部分，则建议列表不会被清除，它们保留在屏幕上，
所以我考虑在输入字段上实现 ng-blur 但问题是当用户单击任何添加标签的建议时 ng-blur 会被触发并且用户无法添加标签。
有没有办法清除建议列表(这是在 ul>li 标签中显示的项目数组)是否有 ng-blur 的替代方案，以便我知道用户何时移出输入区域？
谢谢
最佳答案
对于建议列表，您可以维护一个作用域变量$scope.checkHover。这意味着在 ng-mouseover 事件上您可以将此变量设置为 true ，在 ng-mouseleave 事件上将此变量设置为 false 。因此，在从输入文本框中模糊时，如果此变量为 true，则意味着他在建议列表中，并且不会清除建议列表，如果为 false，则清除建议列表。
关于javascript - 同时使用 ng-click 和 ng-blur，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33063583/