自定义过滤器不会更新 iPhone 上的实时结果

Question

更新：这是一个plunkr

我有一个基本的搜索字段，显示来自员工数据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）中都会发生

我试着让我的过滤器有状态，但这并没有改变任何事情。（我目前使用的是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);
        });
    };
});

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