Question

我想在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
        }
    }    
});

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

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

问题是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显示它正常工作。

Answer 2

检查一下。当用户点击它开始时，只有这个例子不能处理的部分显示整个列表。但这很容易勾结。

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

如果没有输入，如何更改过滤器操作？

2 个答案: