user3648646 user3648646 - 5 months ago 167
AngularJS Question

Clear icon inside ui.bootstrap.typeahead

I am using an angular UI typeahead from Angular bootstrap UI

I would like to be able to clear the selection using an icon in the textbox like below

--------------------------------------------------
| X|
--------------------------------------------------


I have tried using input type search but that didn't work.
my code:

<input type="text" ng-model="search" placeholder="Search"
uib-typeahead="eachCatigory in catigories | limitTo:8"/>


Any suggestions are great.

Answer

http://plnkr.co/edit/e8KUEKNkKZTOVa4DU3oN?p=preview

<div class='input-group'>
  <input type="text"
         ng-model="selected"
         uib-typeahead="state for state in states"
         class="form-control" />
  <span class="input-group-addon"
        ng-click="selected=''">
    X
  </span>
</div>

Modified version that has the X just overlaid on the text box (using relative and absolute positioning)

http://plnkr.co/edit/kBq0U2D5i8CyNwykDUcj?p=preview