I wrote an AngularJs directive at work today for clearing a text field. We still use this in multiple projects for front-end (although I have worked more with Angular than AngularJs last 2-3 years).
The directive ended up like this (we use Bootstrap v2.3.2) :
angular.module('formModule').directive('addClearTextFieldBtn', function ($compile) {
function link(scope, element, attrs) {
var targetId = attrs.id;
var targetNgModel = attrs.ngModel;
var minimumChars = attrs.clearTextFieldBtnMintextlength ? attrs.clearTextFieldBtnMintextlength : "1";
var emptyValue = "''";
var templateAppend = '<i id="clear' + targetId + '" ng-if="' + targetNgModel + ' && + ' + targetNgModel + '.length >= ' + minimumChars + '"' + 'ng-click="' + targetNgModel;
templateAppend += ' = ' + emptyValue + '" class="glyphicon icon-remove form-control-feedback" title="Tøm innhold" style="cursor:pointer; pointer-events: all;" tooltip="clear"></i >';
var clearButton = angular.element(templateAppend);
clearButton.insertAfter(element);
$compile(clearButton)(scope);
}
return {
restrict: 'A',
replace: false,
link: link
};
});
Example usage inside a HTML helper in MVC for example:
add_clear_text_field_btn = "model.Icd10", data_clear_text_field_btn_mintextlength="3"
We pass in a HTML5 data value attribute to specify the minimum length to show the button to clear the field.