没有输入时如何更改过滤器操作？答案

【问题标题】：How to change filter action when there's no input?没有输入时如何更改过滤器操作？
【发布时间】：2014-06-26 18:13:10
【问题描述】：

我想在 AngularJs 中创建一个 typeAhead，并遵循 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
        }
    }    
});

我的问题是，内部函数应该返回什么以便在没有输入时不过滤？过滤器如何与其实际过滤的数据交互？

【问题讨论】：

标签： javascript angularjs filter angularjs-ng-repeat

【解决方案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])" ...

问题是blur 事件在click 事件之前触发，因此列表在它可以注册您单击某个项目之前消失。解决方案是使用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 显示它正在工作。

【讨论】：

感谢您详细解释的答案。只是出于好奇，您在哪里找到 mousedown 然后模糊然后单击的事件顺序？
我只是用谷歌搜索了一下。关于事件顺序并没有真正的明确规范。每个浏览器都可以以不同的方式实现它（不幸的是）。

【解决方案2】：

看看这个。只有当用户单击它开始时，此示例未处理的部分才显示整个列表。但这很容易连接。

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

【讨论】：