当没有输入时，如何改变过滤器的动作

How to change filter action when there's no input?

本文关键字：改变 过滤器 何改变 输入      更新时间：2023-09-26

我想在AngularJs中创建一个typeAhead，并遵循本教程的大部分方法。它唯一没有为我做的是，我希望整个列表在你第一次点击框时显示，而不是等待输入来显示任何内容。
在模板中有

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

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

问题并不在于过滤器。问题是，只有在文本框中输入内容时，项目列表才可见:

<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])"

看看这个。只有部分这个例子没有处理是显示整个列表时，用户单击它开始。但是这样很容易勾搭上。

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

相关文章：