Fatal编程技术网
  • javascript/
  • Javascript 同时使用ng单击和ng模糊

Javascript 同时使用ng单击和ng模糊

javascript html angularjs

Javascript 同时使用ng单击和ng模糊,javascript,html,angularjs,Javascript,Html,Angularjs,我正在努力实施 这是一个自动完成标签输入小部件 这是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="viewpor

我正在努力实施

这是一个自动完成标签输入小部件

这是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>
这很好，但是有一个小问题，如果您开始键入并获得一些结果，并且决定不选择其中任何一个，而是转到屏幕的另一部分，则建议列表不会被清除，它们将保留在屏幕上

因此，我考虑在输入字段上实现ng blur，但问题是当用户单击任何添加标记的建议时，ng blur被触发，用户无法添加标记

有没有办法清除建议列表（即ul>li标签中显示的项目数组）有没有替代ng blur的方法，以便我知道用户何时移出输入区域

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

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

我知道有多种解决方案，但我更喜欢使用
ng mousedown
，如下所示：


点击我！
{{count}}
此示例将在每次单击DIV元素上的鼠标按钮时增加变量“count”的值
我知道这个问题有多种解决方案，但我更喜欢使用
ng mousedown
，如下所示：


点击我！
{{count}}
此示例将在每次单击DIV元素上的鼠标按钮时增加变量“count”的值
trued
ng blur=“suggestions=[]”很遗憾，这会在添加选择之前清除建议列表，因此当用户单击标签添加到列表时，不会添加任何内容。trued
ng blur=“suggestions=[]”
？不幸的是，这会在添加选择之前清除建议列表，因此当用户单击标签添加到列表时，不会添加任何内容。

<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>



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];
            }
        });
    }
}}]);