CODEWITHSUNDEEP
javascriptangularjs
user5613899
user5613899

Reputation:

ng-controller Angular capitalize input

I want the first typed letter turn into a capital letter, but struggeling with Angular. Maybe it is a little detail that I missed out, so a fresh eye to look at this would be helpful. 

var app = angular.module("todoApp", []);
  app.filter("NameInput", function(){
    return function(input, scope){
     if (input!=null)
     input = input.toLowerCase();
     return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="todoApp" ng-cloak>
    <div id="wrapper">

    <div ng-controller="NameInput">
      <label>Name:</label>
      <input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}</h1>
    </div>
    </div>
 </body>

Upvotes: 1

Views: 50

Answers (1)

Aravind
Aravind

Reputation: 41571

Here you go... I think this might help you

var app = angular.module("todoApp", []);
app.filter("NameInput", function() {
    return function(input) {
      if (input != null) {
        input = input.toLowerCase();
        return input.substring(0, 1).toUpperCase() + input.substring(1);
      }
    }
  })
  .controller('NameInput', function($scope) {
    $scope.yourName = "";
  });
<body ng-app="todoApp" ng-cloak>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
  <div id="wrapper">
    <div ng-controller="NameInput">
      <label>Name:</label>
      <input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName | NameInput}}</h1>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions