How to autocapitalize the first character in an input field in AngularJS?

by

Yes, you need to define a directive and define your own parser function:

myApp.directive('capitalizeFirst', function($parse) {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if (inputValue === undefined) { inputValue=""; }
           var capitalized = inputValue.charAt(0).toUpperCase() +
                             inputValue.substring(1);
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.push(capitalize);
         capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
     }
   };
});

HTML:

<input type="text" ng-model="obj.name" capitalize-first>

Fiddle

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. How to set focus on input field?
  3. angular ng-bind-html and directive within it
  4. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  5. How to call a method defined in an AngularJS directive?
  6. How to use a keypress event in AngularJS?
  7. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  8. Angular.js directive dynamic templateURL
  9. Angularjs dynamic ng-pattern validation
  10. What is the difference between ng-app and data-ng-app?
  11. Easiest way to pass an AngularJS scope variable from directive to controller?
  12. Using angularjs filter in input element
  13. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  14. Directive isolate scope with ng-repeat scope in AngularJS
  15. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  16. calling method of parent controller from a directive in AngularJS
  17. Enable angular-ui tooltip on custom events
  18. Accessing attributes from an AngularJS directive
  19. angular directive encapsulating a delay for ng-change
  20. How to modify scope from within a directive in AngularJs
  21. Call a method of a controller from another controller using ‘scope’ in AngularJS
  22. Can you change templateUrl on the fly?
  23. Pass form to directive
  24. What is `priority` of ng-repeat directive can you change it?
  25. Understanding the transclude option of directive definition?
  26. How to detect browser using angularjs?
  27. angularjs text area character counter
  28. ng-click doesn’t work within the template of a directive
  29. When to use double braces {{}} in angularJS
  30. creating a new directive with angularjs

Leave a Comment