Angularjs-如何关闭自动搜索视图

Question

我是angularjs的新手。我有一个输入框，在其下方显示搜索结果。我的代码示例如下。我想点击＆＃34;关闭搜索结果＆＃34;关闭搜索结果。跨度。但无法摆脱任何出路。请帮帮我。

截图：

HTML：

<div>
    <div>
        <input type="text" placeholder="Choose a item..." ng-model="autoSearch" ng-keyup="getList()" class="form-control">
    </div>
    <div class="autosearch-result">
        <div class="search-result-close-block">
            <span class="search-result-close-text">Items found :</span>
            <span class="close" title="Close search result">×</span>
        </div>
        <ul>
            <li>.....</li>
            <li>.....</li>
            <li>.....</li>
        </ul>
    </div>
</div>

CSS：

.autosearch-result {
position: absolute;
top: 100% !important;
z-index: 1;
}

Answer 1

您将要为范围添加一个值，该值具有一个布尔值，用于跟踪是否应隐藏/显示范围

然后，您将需要使用ngShow隐藏/显示div。

<div>
    <div>
        <input type="text" placeholder="Choose a item..." 
              ng-model="autoSearch" ng-keyup="getList()" class="form-control">
    </div>
    <div class="autosearch-result" ng-show="!displayResult">
        <div class="search-result-close-block">
            <span class="search-result-close-text">Items found :</span>
            <span class="close" title="Close search result" 
                  ng-click="displayResult = false>×</span>
        </div>
        <ul>
            <li>.....</li>
            <li>.....</li>
            <li>.....</li>
        </ul>
    </div>
</div>