Динамическая кнопка закрытия на панели поиска с помощью 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>