angular Clear icon inside input text

Question

Is it possible to do something like this -> Clear icon inside input text

only in angular.js? I need it for my angular application and due to various private scopes I can't get it working with jQuery.

i have to add, that ng-show(!input=="") won't work, becouse inputs ng-model is always something(i use it as placeholder for older IE's). — frog, May 23 '14 at 14:18
you could take a look at this answer: http://stackoverflow.com/questions/21468669/input-textbox-mimic-clear-text-x-button-just-like-select2-dropdown-component — paul, May 23 '14 at 14:21
I think @frog means that the ngModel is never empty/null as it contains the place holder text whenever it's been emptied. — Chucky, Oct 10 '14 at 07:41

score 3 · Accepted Answer · answered May 23 '14 at 14:28

3

Assuming you are using ng-model:

<div class="container">
    <input type="text" ng-model="someTextField" />
    <button ng-click="someTextField = ''">x</button>
</div>

answered May 23 '14 at 14:28

romiem

score 2 · Answer 2 · answered Jul 10 '15 at 10:53

2

I have ported the original jquery implementation to Angular JS.

enter image description here

answered Jul 10 '15 at 10:53

A G

score 0 · Answer 3 · answered Sep 30 '16 at 07:24

0

I've created a directive through which you can clear inputs.

Check out the clear-icon directive at GitHub

answered Sep 30 '16 at 07:24

Gangadhar Jannu

3 Answers3