如何在沒有輸入時更改過濾器操作？

Question

我想在AngularJs中創建一個類型，並遵循this tutorial我已經完成了大部分的工作。唯一不適合我的是，我希望當你第一次點擊框時顯示整個列表，而不是等待輸入顯示任何內容。
在模板中有

<input type="text" ng-model="model" placeholder="{{prompt}}" 
    ng-keydown="selected=false"/> 
    ... 
    <div class="item" ng-repeat="item in items | filter:model track by $index" 
     ng-click="handleSelection(item[title])" style="cursor:pointer" 
     ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)"> 

我需要創建一個自定義過濾器我想這想有點像

.filter('psudoFilter', function($filter){  
    var original_filter = $filter('filter'); 
    return function(input){ 
     if(input.length === 0){ 
      return // What should I return if I don't want to change the data? 
     } else { 
      return original_filter(input_to_filter_items_by); //Filter as usual 
     } 
    }  
}); 

我的問題是，應該怎樣內部函數返回，使當沒有輸入時它不會過濾？過濾器如何與它實際要過濾的數據交互？

Answer 1

的問題是不是真正的過濾器。問題是，如果事情是在文本框中鍵入項目列表中才可見：

<div class="items" ng-hide="!model.length || selected"> 

你想要做什麼是顯示在列表中點擊文本框時。我假設你也想在文本框失去焦點時隱藏列表。將ng-focus和ng-blur事件添加到文本框中。我在這些事件中設置了boxHasFocus屬性，並修改了列表中的ng-hide，以便在boxHasFocus爲真時顯示它。

<input type="text" ng-model="model" placeholder="{{prompt}}" ng-keydown="selected=false" ng-focus="boxHasFocus=true" ng-blur="boxHasFocus=false" /> 
<br/> 
<div class="items" ng-hide="(!model.length || selected) && !boxHasFocus"> 

雖然這有一個問題。最初，列表中的項目是這樣的：

<div class="item" ng-repeat="item in items | filter:model track by $index" ng-click="handleSelection(item[title])" ... 

的問題是，click事件之前的blur事件觸發，因此列表中消失，纔可以註冊，你點擊一個項目。解決方法是使用ng-mousedown而不是ng-click，因爲mousedown事件在blur事件之前被觸發。

<div class="item" ng-repeat="item in items | filter:model track by $index" ng-mousedown="handleSelection(item[title])" 

這是Demo顯示它的工作。

Answer 2

看看這個。只有部分這個例子不處理顯示整個列表，當用戶點擊它開始。但是，這將很容易掛鉤。

http://www.byteblocks.com/Post/Autosuggest-text-box-using-AngularJS