Использование нг кнопкой мыши и нг размытости в то же время

Я пытаюсь реализовать this Использование нг кнопкой мыши и нг размытости в то же время

Это автозаполнения тегов Input Widget,

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

Это хорошо работает, однако есть небольшая проблема, если вы начинаете печатать и получить некоторые результаты и решить не выбирать любой из них, но перейти к другому часть экрана, то список предложения не получает очищенную, они остаются на экране,

, так что я думал о реализации нг-смазанности на поле ввода, однако проблема в том, когда пользователи нажимают на любом из предложения по добавлению тега ng-blur запускаются, и пользователи не могут добавить тег.

Есть ли способ очистки предлагаемого списка (который представляет собой массив элементов, отображаемых в тегах ul> li), есть ли альтернатива ng-blur, поэтому я знаю, когда пользователи выходят из области ввода?

Благодаря

источник

2015-10-11 03Usr

попробовал 'ng-blur =" рекомендации = [] "'? – YOU

, к сожалению, что очищает список предложений до добавления добавления, поэтому, когда пользователи нажимают на тег для добавления в список, ничего не добавляется. – 03Usr

Для списка предложений, вы можете сохранить одну область переменной $ scope.checkHover. Это означает, что в событии ng-mouseover вы можете сделать эту переменную как true, а на событии ng-mouseleave сделать эту переменную ложной. Поэтому, размываясь из текстового поля ввода, если эта переменная истинна, то есть он находится в списке предложений и не очищает список предложений, а если он ложный, очистите список предложений.

источник

2015-10-11 10:28:54

Использование нг кнопкой мыши и нг размытости в то же время

ответ

Смежные вопросы