Question

我有一个使用角度过滤器的搜索输入，它工作正常，但我需要解决一件事，但还没有能力。如果用户没有输入实际存在于scope.names数组中任何名称中的字符，那么我不希望显示包含搜索命中的div。此if语句：if (keyValue != scope.names[i].charAt(j))由于某种原因总是评估为true，因此即使找到匹配项，也不会显示div。我已经检查过循环是否按预期运行，但是问题并不存在。我做错了什么？

这是存储名称的地方：

app.controller('addressBookController', function ($scope) {

    $scope.names = [];
});

以下是处理隐藏/显示的代码：

var input = document.getElementById('search');
    input.addEventListener('keyup', function(e) {

        var scope = angular.element(document.getElementById('address-book')).scope();
        var searchHits = document.getElementById('search-hits');
        var keyValue = String.fromCharCode(e.keyCode);
            keyValue = keyValue.toLowerCase() + keyValue.slice(1);    

            if (input.value.length >= 0) {
                searchHits.style.display = 'block';
            }

            if (input.value.length === 0) {
                searchHits.style.display = 'none';    
            }

            for (i = 0; i < scope.names.length; i++) {

                for (j = 0; j < scope.names[i].length; j++) {

                    if (keyValue != scope.names[i].charAt(j)) {
                        searchHits.style.display = 'none';    
                    }
                }
            }

Answer 1

问题在于以下逻辑隐藏div以防错过命中。

if (keyValue != scope.names[i].charAt(j)) {
     searchHits.style.display = 'none';    
 }

让我们说用户输入＆＃39; a＆＃39;并且你的数组包含一个名称＆＃39; ba＆＃39;，所以当循环开始时'a' != 'b'显然是真的，从而隐藏了你的div，而不是再次取消隐藏。
而不是这样做你可以修改你的逻辑如下（还有其他更好的方法使用角度ngShow）：

for (var i = 0; i < scope.names.length; i++) {
    if (scope.names[i].indexOf(keyValue) === -1) {
        searchHits.style.display = 'none';
    }
}

上述逻辑符合您的要求，如果keyValue不存在于所有名称中，将隐藏searchHits div。

循环遍历一组名称，并检查keypress的值是否与名称中的字符匹配

1 个答案: