Question

我有一个基本的搜索字段，显示员工数据的JSON数组中的匹配名称：

<form>
    <label>Enter name: <input type="text" ng-model="search"></label>
</form>

<ul class="result-container" ng-if="search.length>1">
    <li class="result" ng-repeat="emp in employees | filter:{full_name:search}">
</ul>

这很好用，但由于它的移动性，我想尽可能减少JSON下载的大小。由于full_name字段是作为first_name和last_name的串联而动态创建的，如果我可以搜索名字和姓氏，我可以完全从JSON中删除该字段代替。

所以我创建了一个自定义过滤器：

app.filter('firstAndLastName', function() {
    return function(collection, str) {
        return collection.filter(function(el) { // javascript array.filter()
            return (el.first_name.toLowerCase().indexOf(str) !== -1 || el.last_name.toLowerCase().indexOf(str) !== -1);
        });
    };
});

并更新了我的观点以使用它：

    <li class="result" ng-repeat="emp in employees |  firstAndLastName:search">

这在我的桌面浏览器上按预期工作 - 结果在键入文本时实时更新。但是在移动设备上，无论键盘是否打开，它都不再显示任何结果。这在Safari和Chrome（iOS 8.0.2）中都会发生。

我试过了making my filter stateful，但这并没有改变任何事情。（我目前正在使用AngularJS 1.3.0-rc.4。）

为什么AngularJS内置过滤器会更新实时结果，但我的自定义过滤器却没有？为什么这只发生在移动设备上？

Answer 1

您是否尝试确保输入和搜索字符串都设置为小写：

app.filter('firstAndLastName', function() {
    return function(collection, str) {
        var strToLower = str.toLowerCase();
        return collection.filter(function(el) { // javascript array.filter()
            return (el.first_name.toLowerCase().indexOf(strToLower) !== -1 || el.last_name.toLowerCase().indexOf(strToLower) !== -1);
        });
    };
});

我意识到我的手机是自动将第一个字母大写，导致结果无法显示。如果不是这样，您可能需要提供一些关于数据如何进入的更多信息。

自定义过滤器无法在iPhone上更新实时结果

1 个答案: