2014-11-06 39 views
0

我得到了一个使用角度过滤器的搜索输入,它工作正常,但有一件事我需要修复但未能至。如果用户没有输入实际存在于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';  
        } 
       } 
      } 

回答

2

的问题是下面隐藏的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格的情况下的键值不存在在所有的名字。

+0

不得不用一个显示div的else调整你的代码,然后返回。但现在它的作品:) – Chrillewoodz 2014-11-06 10:50:43

+0

伟大。您也可以尝试在循环中使用var displayFlag,并在退出循环后根据标志值仅设置一次元素显示样式。 – Amitesh 2014-11-06 11:27:23

相关问题