javascript - 清除 ui.bootstrap.typeahead 内的图标

Question

我正在使用 Angular bootstrap UI 中的 Angular UI typeahead

我希望能够使用文本框中的图标清除选择，如下所示

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

我尝试过使用输入类型搜索，但没有成功。我的代码:

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

任何建议都很好。

Answer 1

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>

修改后的版本，X 刚刚覆盖在文本框上(使用相对和绝对定位)

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