├── LICENSE
├── README.md
├── angular.dcb-clear-input.js
└── angular.dcb-clear-input.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 dcohenb
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Angular Clear Input
 2 | ===================
 3 | 
 4 | A simple AngularJS plugin that adds a clear button to input boxes
 5 | 
 6 | ## Installation
 7 | 1. Download and import the plugin script.<br />
 8 | `<script type="text/javascript" src="lib/angular-clear-input/angular.dcb-clear-input.min.js"></script>`
 9 | 2. Add `dcbClearInput` to your angular app module dependencies list.<br />
10 | `angular.module('myAngularApp', ['dcbClearInput']);`
11 | 3. Add the `clear-input` attribute to yout input<br />
12 | `<input type="text" ng-model="myModel" clear-input />`
13 | 
14 | 
15 | ## Usage
16 | - Simple usage:<br />
17 | `<input type="text" ng-model="myModel" clear-input />`
18 | 
19 | - Using on a textarea:<br />
20 | `<textarea ng-model="myModel" clear-input></textarea>`
21 | 
22 | - Expression:<br />
23 | `<input type="text" ng-model="myModel" clear-input="myModel = 'newVal'" />`
24 | 
25 | - Function Call:<br />
26 | `<input type="text" ng-model="myModel" clear-input="doSomething()" />`
27 | 
28 | 
29 | ## Advanced options
30 | - Add a class to the appended button, Defaults to: 'clear-btn'.<br />
31 | `<input type="text" ng-model="myModel" clear-input clear-btn-class="custom-class" />`
32 | 
33 | - Replace the button HTML markup with a custom one, Defaults to: '<span>X</span>'.<br />
34 | `<input type="text" ng-model="myModel" clear-input clear-btn-markup="<img src='clear.png' />" />`
35 | 
36 | - Prevant the automatic toggling of the css visibilty property for the clear button<br />
37 | `<input type="text" ng-model="myModel" clear-input clear-disable-visibility="true" />`
38 | 


--------------------------------------------------------------------------------
/angular.dcb-clear-input.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  Angular Clear Input directive
 3 |  (c) 2014 Daniel Cohen. http://dcb.co.il
 4 |  License: MIT
 5 |  */
 6 | angular.module('dcbClearInput', [])
 7 |     .directive('clearInput', ['$parse',
 8 |         function($parse) {
 9 |             return {
10 |                 restrict: 'A',
11 |                 require: 'ngModel',
12 |                 link: function(scope, element, attr) {
13 |                     var htmlMarkup = attr.clearBtnMarkup ? attr.clearBtnMarkup : '<span>X</span>';
14 |                     var btn = angular.element(htmlMarkup);
15 |                     btn.addClass(attr.clearBtnClass ? attr.clearBtnClass : "clear-btn");
16 |                     element.after(btn);
17 | 
18 |                     btn.on('click', function(event) {
19 |                         if (attr.clearInput) {
20 |                             var fn = $parse(attr.clearInput);
21 |                             scope.$apply(function() {
22 |                                 fn(scope, {
23 |                                     $event: event
24 |                                 });
25 |                             });
26 |                         } else {
27 |                             scope[attr.ngModel] = null;
28 |                             scope.$digest();
29 |                         }
30 |                     });
31 | 
32 |                     scope.$watch(attr.ngModel, function(val) {
33 |                         var hasValue = val && val.length > 0;
34 |                         if (!attr.clearDisableVisibility) {
35 |                             btn.css('visibility', hasValue ? 'visible' : 'hidden');
36 |                         }
37 | 
38 |                         if (hasValue && !btn.hasClass('clear-visible')) {
39 |                             btn.removeClass('clear-hidden').addClass('clear-visible');
40 |                         } else if (!hasValue && !btn.hasClass('clear-hidden')) {
41 |                             btn.removeClass('clear-visible').addClass('clear-hidden');
42 |                         }
43 |                     });
44 |                 }
45 |             };
46 |         }
47 |     ]);
48 | 


--------------------------------------------------------------------------------
/angular.dcb-clear-input.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  Angular Clear Input directive
3 |  (c) 2014 Daniel Cohen. http://dcb.co.il
4 |  License: MIT
5 | */
6 | angular.module("dcbClearInput",[]).directive("clearInput",["$parse",function(e){return{restrict:"A",require:"ngModel",link:function(t,n,r){var i=r.clearBtnMarkup?r.clearBtnMarkup:"<span>X</span>";var s=angular.element(i);s.addClass(r.clearBtnClass?r.clearBtnClass:"clear-btn");n.after(s);s.on("click",function(n){if(r.clearInput){var i=e(r.clearInput);t.$apply(function(){i(t,{$event:n})})}else{t[r.ngModel]=null;t.$digest()}});t.$watch(r.ngModel,function(e){var t=e&&e.length>0;if(!r.clearDisableVisibility){s.css("visibility",t?"visible":"hidden")}if(t&&!s.hasClass("clear-visible")){s.removeClass("clear-hidden").addClass("clear-visible")}else if(!hasClass&&!s.hasClass("clear-hidden")){s.removeClass("clear-visible").addClass("clear-hidden")}})}}}])


--------------------------------------------------------------------------------