AngularJS Text-Transform Directive: uppercase, lowercase, capitalize
In the lines of css text-transform property, here are three directives that would transform the text in the input as you type/paste.
The code takes care of the cursor position as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | app .service('textTransformService', function () { return { transform: function (element, ngModelController, callBack) { element.on('input', function () { var currentViewValue = ngModelController.$viewValue; var modifiedViewValue = callBack(currentViewValue); var start = this.selectionStart; var end = this.selectionEnd + modifiedViewValue.length - currentViewValue.length; ngModelController.$setViewValue(modifiedViewValue); ngModelController.$render(); this.setSelectionRange(start, end); }); } }; }) .directive('textTransformUppercase', ['textTransformService', function (srvc) { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, ngModelController) { srvc.transform(element, ngModelController, angular.uppercase); } }; }]).directive('textTransformLowercase', ['textTransformService', function (srvc) { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, ngModelController) { srvc.transform(element, ngModelController, angular.lowercase); } }; }]).directive('textTransformCapitalize', ['textTransformService', function (srvc) { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, ngModelController) { function capitalizeCallback(currentViewValue) { function capitalize(txt) { return angular.uppercase(txt.charAt(0)) + txt.substr(1); } return currentViewValue.replace(/\w\S*/g, capitalize); } srvc.transform(element, ngModelController, capitalizeCallback); } }; }]); |
“AngularJS: The superheroic JS Framework”
-AngularJS Team
-AngularJS Team
Sandeep
Thanks a lot.