Angular JS ionic search box with clear field button

Question

Angular JS ionic search box with clear field button

My app is using ionic and angular js.. I am trying to add a clear button for the search, but Its not working?.. my Code is:

HTML:

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="search">
    </label>
    <button class="button ion-android-close input-button button-small"
              ng-click="clearSearch()" ng-if="search.length">
            </button>

  </div>

APP.JS

  $scope.clearSearch = function() {
   $scope.search = '';
 };

Maybe i need something more but this is not working?

Any help thanks?

javascript
angularjs
ionic-framework

Answer 1

The problem is with ng-if use ng-show instead.

<div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="search">
    </label>

    <button ng-click="search = ''" class="button ion-android-close input-button button-small" ng-show="search.length">Clear
    </button>
</div>