python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
how to angularjs auto capitalize input characters in textbox?

how to angularjs auto capitalize input characters in textbox?

Hello everyone, Today I have a requirement to auto capitalize an input text-box field and I am going to explain to how to auto capitalize an input field characters inside an AngularJs-directive form elements. Here I am using and define a angularjs directive and also define a parser function. which as give below example.

Table of context

1. HTML Template Binding code sample
2. AngularJs code sample
3. Full live example (Click for live plunker)

HTML code sample

?
1
2
3
4
5
6
<div ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</div>
<div ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</div>
AngularJs code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var app = angular.module("capitalizeApp", []);
app.controller('capitalizeController', function($scope) {
  $scope.name = null;
  $scope.notifyUserName = function(name) {
    alert(name);
  };
});
app.directive('capitalizeInputText', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, capitalizeModelCtrl) {
      var capitalizeInputText = function(inputText) {
        var capitalizedValue = inputText.toUpperCase();
        if (inputText === undefined) {
          inputText = "";
        } else {
          if (capitalizedValue !== inputText) {
            capitalizeModelCtrl.$setViewValue(capitalizedValue);
            capitalizeModelCtrl.$render();
          }
        }
        return capitalizedValue;
      }
      capitalizeModelCtrl.$parsers.push(capitalizeInputText);
      capitalizeInputText(scope[attrs.ngModel]); //This is used to capitalize the initial value.
    }
  };
});
var app = angular.module("capitalizeApp", []);
app.controller('capitalizeController', function($scope) {
  $scope.name = null;
  $scope.notifyUserName = function(name) {
    alert(name);
  };
});

app.directive('capitalizeInputText', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, capitalizeModelCtrl) {

      var capitalizeInputText = function(inputText) {
        var capitalizedValue = inputText.toUpperCase();

        if (inputText === undefined) {
          inputText = "";
        } else {
          if (capitalizedValue !== inputText) {
            capitalizeModelCtrl.$setViewValue(capitalizedValue);
            capitalizeModelCtrl.$render();
          }
        }

        return capitalizedValue;
      }

      capitalizeModelCtrl.$parsers.push(capitalizeInputText);
      capitalizeInputText(scope[attrs.ngModel]); //This is used to capitalize the initial value.
    }
  };
});
Full example code sample with HTML and angularjs
?
01
02
03
04
05
06
07
08
09
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
50
51
52
53
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>how to Capitalize input character in textbox angularjs?</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
  <script>
    var app = angular.module("capitalizeApp", []);
    app.controller('capitalizeController', function($scope) {
      $scope.name = null;
      $scope.notifyUserName = function(name) {
        alert(name);
      };
    });
    app.directive('capitalizeInputText', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, capitalizeModelCtrl) {
          var capitalizeInputText = function(inputText) {
            var capitalizedValue = inputText.toUpperCase();
            if (inputText === undefined) {
              inputText = "";
            } else {
              if (capitalizedValue !== inputText) {
                capitalizeModelCtrl.$setViewValue(capitalizedValue);
                capitalizeModelCtrl.$render();
              }
            }
            return capitalizedValue;
          }
          capitalizeModelCtrl.$parsers.push(capitalizeInputText);
          capitalizeInputText(scope[attrs.ngModel]);
           //This is used to capitalize the initial value.
        }
      };
    });
  </script>
</head>
<body ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>how to Capitalize input character in textbox angularjs?</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
  <script>
    var app = angular.module("capitalizeApp", []);
    app.controller('capitalizeController', function($scope) {
      $scope.name = null;
      $scope.notifyUserName = function(name) {
        alert(name);
      };
    });

    app.directive('capitalizeInputText', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, capitalizeModelCtrl) {

          var capitalizeInputText = function(inputText) {
            var capitalizedValue = inputText.toUpperCase();

            if (inputText === undefined) {
              inputText = "";
            } else {
              if (capitalizedValue !== inputText) {
                capitalizeModelCtrl.$setViewValue(capitalizedValue);
                capitalizeModelCtrl.$render();
              }
            }

            return capitalizedValue;
          }

          capitalizeModelCtrl.$parsers.push(capitalizeInputText);
          capitalizeInputText(scope[attrs.ngModel]); 
           //This is used to capitalize the initial value.
        }
      };
    });
  </script>
</head>

<body ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</body>

</html>
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions