循环访问名称数组并检查按键的值是否与名称中的某个字符匹配

Question

我得到了一个使用角度过滤器的搜索输入，它工作正常，但有一件事我需要修复但未能至。如果用户没有输入实际存在于scope.names数组中的任何名称中的字符，那么我不希望包含搜索匹配的div完全显示。这if语句：if (keyValue != scope.names[i].charAt(j))总是由于某种原因评估为真，所以即使找到了匹配，也不会显示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';  
} 

可以说，用户输入“a”和你的数组包含一个名称为“BA”，因此，当循环开始明显'a' != 'b'将是真实的，从而隐藏你的DIV未再unhided。
而不是做这个的，你可以修改你的逻辑如下（有采用了棱角分明ngShow其他更好的方法）：

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

以上的逻辑是按照您的要求，并会隐藏searchHits格的情况下的键值不存在在所有的名字。