CODEWITHSUNDEEP
javascriptangularjs
Ronnie
Ronnie

Reputation: 11198

AngularJS, clear input text with button

Using AngularJS, what is the proper way to clear the value of a text field? I have an input field with a button next to it. The user types in it and hits the button to clear or reset it.

I know I can add an ng-click event on the button itself and call a function, but I am not sure that is the correct way to do it.

Right now all I have is:

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

Upvotes: 7

Views: 34354

Answers (2)

nijlgier
nijlgier

Reputation: 301

I had the same problem. Maybe simple is best?

No need for calling a method in the controller. No need for a directive either. Just a brief statement to clear the model that you declared in the input tag. Like this:

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

You may also hide the clear button when there is no text in the input, like this:

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

By the way, maybe a directive that would put the clear button inside of the input box would be nice. Something like you see on the iPhone.

Upvotes: 30

Dogoku
Dogoku

Reputation: 4675

ng-click is the "Angular" way to do it

just declare a function in your scope and attach it to the button's ng-click

If you wanted something more advanced, then the "Angular way" suggests creating a directive to wrap the functionality you want in it and attach it somehow to your button (depending on how you implement your directive)

If you want an example, let me know in the comments

Upvotes: 8

Related Questions