Frontend employee Frontend employee - 2 months ago 19
Javascript Question

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 details 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>




Answer

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>