CODEWITHSUNDEEP
javascripthtmlangularjs
brithwulf
brithwulf

Reputation: 548

How can i capitalize letters dynamic in angularjs

i got a problem when i was making capitalize dynamically. In my code i can capitalize any letters but it is not dynamic, if there is some solution for this, please tell me. here is my code :

this is my Controller.

app.controller('myController', ['$scope', '$document',function($scope, $document) {
    $scope.typetext = "I am Programmer";
    $document.on('keydown', function(e) {
      if (e.which === 8 && e.target.nodeName !== "INPUT") {
        e.preventDefault();
      }
    });
  }

This is where i make capitalize to some letters:

return {
  priority: 100,
  require: 'ngModel',
  restrict: 'A',
  link: function (scope, iElement, iAttrs, controller) {

          controller.$parsers.push(function (inputValue) {
          var transformedInput = '';
          if(inputValue){
            for(var i=0; i<inputValue.length; i++){
              if(i===0 || i===5){
                transformedInput += inputValue.charAt(i).toUpperCase();
              }
              else{
                transformedInput += inputValue.charAt(i).toLowerCase();
              }
            }
          }
            if (transformedInput != inputValue) {
            controller.$setViewValue(transformedInput);
            controller.$render();
        }

        return transformedInput;
    });

and index.html

<textarea  id="fieldId" class="textarea" style="resize: none" cols="30" row="2" ui-mask="{{typetext}}"  ng-model="model" data-ng-trim="fasle" ng-trim="false" ng-focus="expression">

if you know solution help me somehow, or tell me the logic how can i make capitalization dynamic if you can.

Thanks in advance.

Upvotes: 0

Views: 268

Answers (1)

Fissio
Fissio

Reputation: 3758

Here's a directive you can use to capitalize the selected letters in an input.

// Code goes here

angular.module('app', [])
.controller('ctrl', function($scope) {
  //$scope.value = "asdasd"
})
.directive('myUppercase', function() {
  return {
    scope: {
      positions: '=myUppercase'
    },
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {
      
      scope.positions = scope.positions || []
      
      ngModelCtrl.$render = function() {
        elem.val(ngModelCtrl.$viewValue || "")
      }
      
      function makeString() {
        var string = elem.val()
        angular.forEach(scope.positions, function(pos) {
          string = string.slice(0, pos) + string.charAt(pos).toUpperCase() + string.slice(pos + 1)
        })
        ngModelCtrl.$setViewValue(string)
        ngModelCtrl.$render()
        return string;
      }
      
      elem.bind('blur keyup change', function() {
        scope.$apply(makeString);
      });
    }
  }
})
<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <input ng-model="value" my-uppercase="[0, 2]" placeholder="1st and 3rd are capitalized">
    <input ng-model="value2" my-uppercase="[0, 3, 7]" placeholder="1st, 4th and 8th are capitalized">
  </body>

</html>

Upvotes: 1

Related Questions