如何在AngularJS中的任何其他地方单击时隐藏输入字段。

24 浏览
0 Comments

如何在AngularJS中的任何其他地方单击时隐藏输入字段。

我是一个想要学习的新手.....我写了一个代码，类似于实时搜索..现在我想在页面的其他任何地方点击时隐藏它...代码使用了Angularjs.完整代码有点复杂.实时搜索只是其中的一部分.所以它在这里不起作用...有人能给我这个问题的答案吗？\n

var app = angular.module('instantsearch', []);
// 通过将数据引入作用域来定义搜索控制器。
app.controller("instantSearchCtrl", function($scope) {
  $scope.data = data;
  $scope.setQuery = function(query) {
    $scope.query = query;
    $scope.focus = false;
  };
});
// 返回将在数据上执行过滤器的搜索函数。
app.filter('search', function() {
  return search;
});
// 返回一个项目数组，其中项目文本与搜索查询匹配。在此示例中，查询和项目都将转换为小写，以便更容易进行匹配。
function search(arr, query) {
  if (!query) {
    return arr;
  }
  var results = [];
  query = query.toLowerCase();
  angular.forEach(arr, function(item) {
    if (item.toLowerCase()
      .indexOf(query) == 0) {
      results.push(item);
    }
  });
  return results;
};

\n

 
ul.data-ctrl 
{
    list-style: outside none none;
    margin: 0 auto;
    max-width: 500px;
    padding-left: 0;
    text-align: center;
    text-decoration: none;
}
input.search {
    border: 2px solid #1fa67a;
    font-size: 16px;
    height: 35px;
    text-align: center;
    width: 280px;
}
.data-ctrl li {
    background-color: #000;
    border-radius: 3px;
    color: #ffffff;
    font-size: 17px;
    height: 25px;
    padding: 0;
}

\n


    
        
        
    
            
  •

0

1 答案

0 Comments

问题的原因是，当点击列表项之前，输入框的失焦事件会先触发，导致在点击列表项时无法获取到要设置的"item"。

解决方法是，可以使用ng-click事件来替代ng-blur事件，并将ng-hide指令中的hideInput属性设置为true，以隐藏输入框。这样，在点击列表项时就不会再触发输入框的失焦事件，可以正常获取到要设置的"item"。

以下是解决方法的代码示例：


  
    
    
    
      
  •

通过将ng-click事件绑定到输入框上，并在点击时将hideInput属性设置为true，可以在点击列表项时隐藏输入框，避免触发失焦事件。这样，在点击列表项时就能够正常获取到要设置的"item"。

0