使用 AngularJS 的搜索栏上的动态关闭按钮

Question

当我在搜索文本框中输入一些值时，[X] 关闭按钮动态出现在文本框的左上角，我需要在单击 [X] 时清除和搜索结果使用 AnglarJS 关闭按钮。

示例 - 与 Microsoft Outlook 电子邮件搜索完全相同。

Answer 1

为了显示 X，您需要使用 ng-show 仅在输入中有内容时显示它，并使用 ng-click 绑定明文逻辑，如下所示：

div {
  width: 300px;
  position: relative;
}

input {
  width: 100%;
}

span {
  position: absolute;
  right: 2px;
  top: 2px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <input type="text" ng-model="text">
  <span ng-show="text" ng-click="text='';">X</span>
</div>

使用 AngularJS 的搜索栏上的动态关闭按钮

Dynamic close button on search bar using AngularJS

textbox

dynamic

angularjs