使用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>