ng-controller角度资本化输入

时间:2016-09-25 18:57:35

标签: javascript angularjs

我希望第一个输入的字母变为大写字母,但是与Angular一起使用。也许这是我错过的一个小细节,所以重新审视一下这将是有帮助的。



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

在这里你...... 我想这可能会对你有所帮助

&#13;
&#13;
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 = "";
  });
&#13;
<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>
&#13;
&#13;
&#13;