A clear input plugin for angualrjs
1 person uses it
Author: 1086354 dcohenb

Angular Clear Input

A simple AngularJS plugin that adds a clear button to input boxes


  1. Download and import the plugin script. <link rel="stylesheet" href="lib/angular-clear-input/angular.dcb-clear-input.min.js"/>
  2. Add dcbClearInput to your angular app module dependencies list. angular.module('myAngularApp', ['dcbClearInput']);
  3. Add the clear-input attribute to yout input <input type="text" ng-model="myModel" clear-input />


  • Simple usage: <input type="text" ng-model="myModel" clear-input />

  • Using on a textarea: <textarea ng-model="myModel" clear-input></textarea>

  • Expression: <input type="text" ng-model="myModel" clear-input="myModel = 'newVal'" />

  • Function Call: <input type="text" ng-model="myModel" clear-input="doSomething()" />

Advanced options

  • Add a class to the appended button, Defaults to: 'clear-btn'. <input type="text" ng-model="myModel" clear-input clear-btn-class="custom-class" />

  • Replace the button HTML markup with a custom one, Defaults to: 'X'. <input type="text" ng-model="myModel" clear-input clear-btn-markup="<img src='clear.png' />" />

  • Prevant the automatic toggling of the css visibilty property for the clear button <input type="text" ng-model="myModel" clear-input clear-disable-visibility="true" />

comments powered by Disqus
This page was last updated about 4 years ago.