每当单击角度js中的其他任何位置时如何隐藏输入字段

Question

我是一个试图学习一些东西的菜鸟.....我已经编写了一个类似于实时搜索的代码......现在我想在我点击页面上的其他任何地方时隐藏它......代码是使用 Angularjs。完整的代码有点复杂。实时搜索只是其中的一部分。所以它在这里不起作用……谁能给我一个问题的答案？

var app = angular.module('instantsearch', []);

// Defines the search controller by bringing the data into the scope.
//
app.controller("instantSearchCtrl", function($scope) {
  $scope.data = data;

  $scope.setQuery = function(query) {
    $scope.query = query;
    $scope.focus = false;
  };
});

// Returns the search function that will perform the filter on the data.
//
app.filter('search', function() {
  return search;
});

// Returns an array of items where the item text matches the search query. In
// this example, both the query and item are converted to lower case for easier
// matching.
//
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;
};

 

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;
}

<tr ng-app="instantsearch">
    <td colspan="3"  ng-controller="instantSearchCtrl">
        <input type="text" class="search" name="keyword" ng-model="query" id="keywords" placeholder="Keywords:" ng-focus="focus=true">
        <ul class="data-ctrl" ng-show="focus">
            <li ng-repeat="item in data | search:query" ng-bind="item" ng-click="setQuery(item)"></li>
        </ul>
    </td>
</tr>

Answer 1

您可以尝试将ng-hide 与ng-blur 一起使用，例如：

<tr ng-app="instantsearch">
<td colspan="3"  ng-controller="instantSearchCtrl">
    <input type="text" class="search" name="keyword" ng-model="query" id="keywords" placeholder="Keywords:" ng-focus="focus=true" ng-hide="hideInput" ng-blur="hideInput = true;">
    <ul class="data-ctrl" ng-show="focus">
        <li ng-repeat="item in data | search:query" ng-bind="item" ng-click="setQuery(item)"></li>
    </ul>
  </td>
</tr>