javascript - AngularJS，用按钮清除输入文本

Question

使用 AngularJS，清除文本字段值的正确方法是什么？我有一个输入字段，旁边有一个按钮。用户输入它并点击按钮来清除或重置它。

我知道我可以在按钮本身上添加一个 ng-click 事件并调用一个函数，但我不确定这是正确的方法。

现在我只有:

<input type="text" ng-model="searchQuery" />
<button class="btn" <!--do something here maybe?-->>
  <i class="icon-search" ng-class="{'icon-refresh': searchQuery.length}"></i>
</button>

Answer 1

我遇到了同样的问题。也许简单是最好的？

无需调用 Controller 中的方法。也不需要指令。只是一个简短的语句来清除您在输入标签中声明的模型。像这样:

<input ng-model="searchQuery">
<button class="btn" ng-click="searchQuery = ''"></button>

您也可以在输入中没有文本时隐藏清除按钮，如下所示:

<button class="btn" ng-show="searchQuery.length" ...></button>

顺便说一句，也许将清除按钮放在输入框内的指令会很好。类似于您在 iPhone 上看到的内容。