AngularJS，使用按钮清除输入文本

使用AngularJS，清除文本字段值的正确方法是什么？我有一个旁边有一个按钮的输入栏。用户输入并点击按钮清除或重置。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>

来源

2013-03-09 Ronnie

ng-click是“角”的方式做到这一点

只需要声明一个函数在你的范围并将其连接到按钮的NG单击

如果你想要更先进的东西，那么“角度的方式”建议创建一个指令来包装你想要的功能并以某种方式将它附加到你的按钮上（取决于你如何实现如果你想要一个例子EMENT你的指令）

，让我知道在评论

来源

2013-03-09 00:51:21 Dogoku

好的，如果是这样，那么我很确定我能弄明白。我不确定是否有更好的做法可以做到这一点。谢谢@Dogoku – Ronnie 2013-03-09 00:56:51

，只是为了确认，这是我最终重置它''scope.resetSearch = function（）{$ scope.searchQuery =“”;}' – Ronnie 2013-03-09 01:00:40

是的，看起来不错 – Dogoku 2013-03-09 01:01:43

我有同样的问题。也许简单是最好的？

无需调用控制器中的方法。不需要任何指令。只是一个简短的声明来清除您在输入标签中声明的模型。就像这样：

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

您也可以隐藏在清除按钮时，有输入任何文字，如：

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

顺便说一句，也许指令，会把清除按钮内的输入框会很好。就像你在iPhone上看到的一样。

来源

2014-02-01 14:41:23 nijlgier

+1 - 这是更多的'角度的方式'只是为了清除点击数据模型。 – Zeeshan 2014-03-05 08:16:41

很棒的回答。只是为了澄清一个小的错字 - 仔细检查“searchQquery”按钮。 – Federico 2014-04-17 18:35:24

谢谢，我删除了第二个'q' – nijlgier 2014-04-19 09:05:27

AngularJS，使用按钮清除输入文本

回答

相关问题