Question

我正在尝试实施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>&nbsp;<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];
            }
        });
    }
}}]);

这很有效但是有一个小问题，如果你开始输入并获得一些结果并决定不选择其中任何一个但转到屏幕的另一部分然后建议列表不会被清除< / strong>，它们仍留在屏幕上，

所以我想在输入字段上实现ng-blur，但问题是用户点击任何建议添加标签时ng-blur被触发，用户无法添加标签。

有没有办法清除建议列表（这是ul> li标签中显示的项目数组）是否有ng-blur的替代方法，所以我知道用户什么时候离开输入区域？

由于

Answer 1

对于建议列表，您可以维护一个范围变量$ scope.checkHover。这意味着在ng-mouseover事件中，您可以将此变量设为true，并且在ng-mouseleave事件中将此变量设为false。因此，当从输入文本框中模糊时，如果此变量为true表示他在建议列表中并且未清除建议列表，如果为false，则清除建议列表。

Answer 2

我知道这个问题有多种解决方案，但我首选的是使用ng-mousedown，如下所示：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

<div ng-mousedown="count = count + 1" ng-init="count=0">Click me!</div>

<h1>{{count}}</h1>

<p>This example will increase the value of the variable "count" every time a mouse button is clicked on the DIV element.</p>

</body>
</html>

同时使用ng-click和ng-blur

2 个答案: