ng-controller Angular capitalize input

Question

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>

as you are using NameInput controller on view, have you defined it ? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 25, 2016 at 19:01
where is the controller "NameInput" is not defined in the code please update it — Aravind
– Aravind, Commented Sep 25, 2016 at 19:16
That is exactly my point, do not know where I should look at. — user5613899
– user5613899, Commented Sep 25, 2016 at 19:19

Aravind · Accepted Answer · 2016-09-25 19:28:03Z

1

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>

answered Sep 25, 2016 at 19:28

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5613899 Over a year ago

Thank bro, exactly what i was looking for!

Aravind Over a year ago

Chill out!! Have fun.. :D

Collectives™ on Stack Overflow

ng-controller Angular capitalize input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related