blocks|key|146720|text|您可以使用提供的大写过滤器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146721|http://docs.angularjs.org/api/ng.filter:uppercase|offset|length|146722|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

You can use the provided uppercase filter.

<a href="http://docs.angularjs.org/api/ng.filter:uppercase" rel="nofollow">http://docs.angularjs.org/api/ng.filter:uppercase</a>

blocks|key|146741|text|您可以创建自定义过滤器'capitalize‘，并将其应用于任何您想要的字符串：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146742|+<div+ng-controller="MyCtrl">
+++++{{aString+%7C+capitalize}}+!
</div>|code-block|syntax|javascript|146743|过滤器的JavaScript代码：|146744|var+app+=+angular.module('myApp',[]);

myApp.filter('capitalize',+function()+{
++++return+function(input,+scope)+{
++++++++return+input.substring(0,1).toUpperCase()%2Binput.substring(1);
++++}
});|146745|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can create a custom filter 'capitalize' and apply it to any string you want:

<pre><code> &lt;div ng-controller="MyCtrl"&gt;
 {{aString | capitalize}} !
&lt;/div&gt;
</code></pre>

JavaScript code for filter:

<pre><code>var app = angular.module('myApp',[]);

myApp.filter('capitalize', function() {
 return function(input, scope) {
 return input.substring(0,1).toUpperCase()+input.substring(1);
 }
});
</code></pre>

blocks|key|365014|text|是的，您需要定义一个指令并定义您自己的解析器函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365015|myApp.directive('capitalizeFirst',+function($parse)+{
+++return+{
+++++require:+'ngModel',
+++++link:+function(scope,+element,+attrs,+modelCtrl)+{
++++++++var+capitalize+=+function(inputValue)+{
+++++++++++if+(inputValue+===+undefined)+{+inputValue+=+'';+}
+++++++++++var+capitalized+=+inputValue.charAt(0).toUpperCase()+%2B
+++++++++++++++++++++++++++++inputValue.substring(1);
+++++++++++if(capitalized+!==+inputValue)+{
++++++++++++++modelCtrl.$setViewValue(capitalized);
++++++++++++++modelCtrl.$render();
++++++++++++}+++++++++
++++++++++++return+capitalized;
+++++++++}
+++++++++modelCtrl.$parsers.push(capitalize);
+++++++++capitalize($parse(attrs.ngModel)(scope));+//+capitalize+initial+value
+++++}
+++};
});|code-block|syntax|javascript|365016|HTML：|365017|<input+type="text"+ng-model="obj.name"+capitalize-first>|365018|Fiddle|offset|length|365019|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mrajcok/YyYnM/^0|0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Yes, you need to define a directive and define your own parser function:

<pre><code>myApp.directive('capitalizeFirst', function($parse) {
 return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
 var capitalize = function(inputValue) {
 if (inputValue === undefined) { inputValue = ''; }
 var capitalized = inputValue.charAt(0).toUpperCase() +
 inputValue.substring(1);
 if(capitalized !== inputValue) {
 modelCtrl.$setViewValue(capitalized);
 modelCtrl.$render();
 } 
 return capitalized;
 }
 modelCtrl.$parsers.push(capitalize);
 capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
 }
 };
});
</code></pre>

HTML:

<pre><code>&lt;input type="text" ng-model="obj.name" capitalize-first&gt;
</code></pre>

<a href="http://jsfiddle.net/mrajcok/YyYnM/">Fiddle</a>

blocks|key|365068|text|请记住，并不是所有的东西都需要一个角度的解决方案。你在jQuery人群中经常看到这一点；他们喜欢使用昂贵的jQuery函数来做更简单或更容易用纯javascript做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365069|因此，虽然您可能非常需要一个capitalize函数，并且上面的答案提供了这一点，但只使用css规则"text-transform:+capitalize“会更有效率。|365070|<tr+ng-repeat="(key,+value)+in+item">
++++<td+style="text-transform:+capitalize">{{key}}</td>
++++<td>{{item}}</td>
</tr>|code-block|syntax|javascript|365071|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Please remember that not everything needs an Angular solution. You see this a lot with the jQuery crowd; they like to use expensive jQuery functions to do things that are simpler or easier to do with pure javascript.

So while you might very well need a capitalize function and the above answers provide that, it's going to be a lot more efficient to just use the css rule "text-transform: capitalize"

<pre><code>&lt;tr ng-repeat="(key, value) in item"&gt;
 &lt;td style="text-transform: capitalize"&gt;{{key}}&lt;/td&gt;
 &lt;td&gt;{{item}}&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

blocks|key|365093|text|你可以使用纯css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365094|input+{+++++text-transform:+capitalize;+}|offset|length|style|CODE|365095|entityMap^0|0|0|15|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

You could use pure css:

<code>input {
 text-transform: capitalize;
}</code>

blocks|key|146877|text|要修复光标问题(+Mark+Rajcok的解决方案)，可以在方法的开头存储element.selectionStart，然后确保在返回之前将element.selectionStart和element.selectionEnd重置为存储值。这将捕获您在angular中的选择范围|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146878|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

To fix the cursor problem (from where Mark Rajcok's solution),
you can store element[0].selectionStart at the beginning of your method, 
and then ensure to reset element[0].selectionStart and element[0].selectionEnd to the stored value before the return.
This should capture your selection range in angular

blocks|key|365190|text|使用CSS+:first-letter伪类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365191|您需要将所有内容都放在小写上，然后只在第一个字母上应用大写字母|365192|p{
++++text-transform:+lowercase;
}
p:first-letter{
++++text-transform:+uppercase;
}|code-block|syntax|javascript|365193|下面是一个例子：http://jsfiddle.net/AlexCode/xu24h/|offset|length|365194|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/AlexCode/xu24h/^0|0|0|0|8|Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Use the CSS :first-letter pseudo class.

You need to put everything lowercase and after apply the uppercase only to the first letter

<pre><code>p{
 text-transform: lowercase;
}
p:first-letter{
 text-transform: uppercase;
}
</code></pre>

Here's an example: <a href="http://jsfiddle.net/AlexCode/xu24h/" rel="nofollow noreferrer">http://jsfiddle.net/AlexCode/xu24h/</a>

blocks|key|365230|text|下面是一个大写第一个字母的过滤器的代码：http://codepen.io/WinterJoey/pen/sfFaK|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|365231|angular.module('CustomFilter',+[]).
++filter('capitalize',+function()+{
++++return+function(input,+all)+{
++++++return+(!!input)+?+input.replace(/([%5E\W_]%2B[%5E\s-]*)+*/g,+function(txt){return+txt.charAt(0).toUpperCase()+%2B+txt.substr(1).toLowerCase();})+:+'';
++++}
++});|code-block|syntax|javascript|365232|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/WinterJoey/pen/sfFaK^0|K|12|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here's a codepen for a filter that capitalizes the first letter:
<a href="http://codepen.io/WinterJoey/pen/sfFaK" rel="nofollow">http://codepen.io/WinterJoey/pen/sfFaK</a>

<pre><code>angular.module('CustomFilter', []).
 filter('capitalize', function() {
 return function(input, all) {
 return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
 }
 });
</code></pre>

blocks|key|365268|text|我更喜欢过滤器和指令。这应该适用于光标移动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365269|app.filter('capitalizeFirst',+function+()+{
++++return+function+(input,+scope)+{
++++++++var+text+=+input.substring(0,+1).toUpperCase()+%2B+input.substring(1).toLowerCase();
++++++++return+text;
++++}
});

app.directive('capitalizeFirst',+['$filter',+function+($filter)+{
++++return+{
++++++++require:+'ngModel',
++++++++link:+function+(scope,+element,+attrs,+controller)+{
++++++++++++controller.$parsers.push(function+(value)+{
++++++++++++++++var+transformedInput+=+$filter('capitalizeFirst')(value);
++++++++++++++++if+(transformedInput+!==+value)+{
++++++++++++++++++++var+el+=+element[0];
++++++++++++++++++++el.setSelectionRange(el.selectionStart,+el.selectionEnd);
++++++++++++++++++++controller.$setViewValue(transformedInput);
++++++++++++++++++++controller.$render();
++++++++++++++++}
++++++++++++++++return+transformedInput;
++++++++++++});
++++++++}
++++};
}]);|code-block|syntax|javascript|365270|这是一个fiddle|offset|length|365271|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zq3xcehc/^0|0|0|4|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I would prefer a filter and directive. This should work with cursor movement:

<pre><code>app.filter('capitalizeFirst', function () {
 return function (input, scope) {
 var text = input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase();
 return text;
 }
});

app.directive('capitalizeFirst', ['$filter', function ($filter) {
 return {
 require: 'ngModel',
 link: function (scope, element, attrs, controller) {
 controller.$parsers.push(function (value) {
 var transformedInput = $filter('capitalizeFirst')(value);
 if (transformedInput !== value) {
 var el = element[0];
 el.setSelectionRange(el.selectionStart, el.selectionEnd);
 controller.$setViewValue(transformedInput);
 controller.$render();
 }
 return transformedInput;
 });
 }
 };
}]);
</code></pre>

Here is a <a href="http://jsfiddle.net/zq3xcehc/" rel="nofollow">fiddle</a>

blocks|key|365315|text|Mark+Rajcok解决方案的注释:当使用$setViewValue时，您将再次触发解析器和验证器。如果在capitalize函数的开头添加一条console.log语句，您将看到它被打印两次。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365316|我提出了以下直接解决方案(其中ngModel是可选的)：|365317|.directive('capitalize',+function()+{
+++return+{
+++++restrict:+'A',
+++++require:+'?ngModel',
+++++link:+function(scope,+element,+attrs,+ngModel)+{
+++++++++var+capitalize+=+function+(inputValue)+{
+++++++++++++return+(inputValue+%7C%7C+'').toUpperCase();
+++++++++}
+++++++++if(ngModel)+{
+++++++++++++ngModel.$formatters.push(capitalize);
+++++++++++++ngModel._$setViewValue+=+ngModel.$setViewValue;
+++++++++++++ngModel.$setViewValue+=+function(val){
+++++++++++++++++ngModel._$setViewValue(capitalize(val));
+++++++++++++++++ngModel.$render();
+++++++++++++};
+++++++++}else+{
+++++++++++++element.val(capitalize(element.val()));
+++++++++++++element.on("keypress+keyup",+function(){
+++++++++++++++++scope.$evalAsync(function(){
+++++++++++++++++++++element.val(capitalize(element.val()));
+++++++++++++++++});
+++++++++++++});
+++++++++}
+++++}
+++};
});|code-block|syntax|javascript|365318|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Comment to Mark Rajcok solution: when using $setViewValue, you trigger the parsers and validators again. If you add a console.log statement at the beginning of your capitalize function, you'll see it printed twice.

I propose the following directive solution (where ngModel is optional):

<pre><code>.directive('capitalize', function() {
 return {
 restrict: 'A',
 require: '?ngModel',
 link: function(scope, element, attrs, ngModel) {
 var capitalize = function (inputValue) {
 return (inputValue || '').toUpperCase();
 }
 if(ngModel) {
 ngModel.$formatters.push(capitalize);
 ngModel._$setViewValue = ngModel.$setViewValue;
 ngModel.$setViewValue = function(val){
 ngModel._$setViewValue(capitalize(val));
 ngModel.$render();
 };
 }else {
 element.val(capitalize(element.val()));
 element.on("keypress keyup", function(){
 scope.$evalAsync(function(){
 element.val(capitalize(element.val()));
 });
 });
 }
 }
 };
});
</code></pre>

blocks|key|365373|text|在Mark+Rajcok的解决方案的基础上构建；重要的是要考虑到指令只在输入字段被占用时求值，否则您将收到错误消息，直到输入字段有第一个字符。只需几个条件即可轻松修复:使用jsfiddle：https://jsfiddle.net/Ely_Liberov/Lze14z4g/2/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|365374|++++++.directive('capitalizeFirst',+function(uppercaseFilter,+$parse)+{
++++++return+{
++++++++require:+'ngModel',
++++++++link:+function(scope,+element,+attrs,+modelCtrl)+{
++++++++++++var+capitalize+=+function(inputValue)+{
++++++++++++++if+(inputValue+!=+null)+{
++++++++++++++var+capitalized+=+inputValue.charAt(0).toUpperCase()+%2B
++++++++++++++++inputValue.substring(1);
++++++++++++++if+(capitalized+!==+inputValue)+{
+++++++++++++++++modelCtrl.$setViewValue(capitalized);
+++++++++++++++++modelCtrl.$render();
++++++++++++++}
++++++++++++++return+capitalized;
++++++++++++}
++++++++++};
++++++++++var+model+=+$parse(attrs.ngModel);
++++++++++modelCtrl.$parsers.push(capitalize);
++++++++++capitalize(model(scope));
++++++++}
+++++++};
++++});|code-block|syntax|javascript|365375|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Ely_Liberov/Lze14z4g/2/^0|2N|18|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Building off Mark Rajcok's solution; It's important to consider that the directive evaluate only when the input field in engaged, otherwise you'll get error messages firing off until the input field has a 1st character.
Easy fix with a few conditionals:
A jsfiddle to go with that: <a href="https://jsfiddle.net/Ely_Liberov/Lze14z4g/2/" rel="nofollow">https://jsfiddle.net/Ely_Liberov/Lze14z4g/2/</a>

<pre><code> .directive('capitalizeFirst', function(uppercaseFilter, $parse) {
 return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
 var capitalize = function(inputValue) {
 if (inputValue != null) {
 var capitalized = inputValue.charAt(0).toUpperCase() +
 inputValue.substring(1);
 if (capitalized !== inputValue) {
 modelCtrl.$setViewValue(capitalized);
 modelCtrl.$render();
 }
 return capitalized;
 }
 };
 var model = $parse(attrs.ngModel);
 modelCtrl.$parsers.push(capitalize);
 capitalize(model(scope));
 }
 };
 });
</code></pre>

blocks|key|147205|text|对于仅有CSS的答案，您可以始终使用Twitter+Bootstrap。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|147206|<td+class="text-capitalize">|code-block|syntax|javascript|147207|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/^0|I|H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Further to the CSS-only answers, you could always use <a href="http://getbootstrap.com/" rel="nofollow">Twitter Bootstrap</a>:

<pre><code>&lt;td class="text-capitalize"&gt;
</code></pre>

blocks|key|147235|text|css-ony答案的问题是角度模型没有随着视图更新。这是因为css仅在呈现后应用样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|147236|以下指令更新模型并记住游标的位置|147237|app.module.directive('myCapitalize',+[+function+()+{
++++++++'use+strict';

++++return+{
++++++++require:+'ngModel',
++++++++restrict:+"A",
++++++++link:+function+(scope,+elem,+attrs,+modelCtrl)+{

++++++++++++/*+Watch+the+model+value+using+a+function+*/
++++++++++++scope.$watch(function+()+{
++++++++++++++++return+modelCtrl.$modelValue;
++++++++++++},+function+(value)+{

++++++++++++++++/**
+++++++++++++++++*+Skip+capitalize+when:
+++++++++++++++++*+-+the+value+is+not+defined.
+++++++++++++++++*+-+the+value+is+already+capitalized.
+++++++++++++++++*/
++++++++++++++++if+(!isDefined(value)+%7C%7C+isUpperCase(value))+{
++++++++++++++++++++return;
++++++++++++++++}

++++++++++++++++/*+Save+selection+position+*/
++++++++++++++++var+start+=+elem[0].selectionStart;
++++++++++++++++var+end+=+elem[0].selectionEnd;

++++++++++++++++/*+uppercase+the+value+*/
++++++++++++++++value+=+value.toUpperCase();

++++++++++++++++/*+set+the+new+value+in+the+modelControl+*/
++++++++++++++++modelCtrl.$setViewValue(value);

++++++++++++++++/*+update+the+view+*/
++++++++++++++++modelCtrl.$render();

++++++++++++++++/*+Reset+the+position+of+the+cursor+*/
++++++++++++++++elem[0].setSelectionRange(start,+end);
++++++++++++});

++++++++++++/**
+++++++++++++*+Check+if+the+string+is+defined,+not+null+(in+case+of+java+object+usage)+and+has+a+length.
+++++++++++++*+@param+str+{string}+The+string+to+check
+++++++++++++*+@return+{boolean}+<code>true</code>+when+the+string+is+defined
+++++++++++++*/
++++++++++++function+isDefined(str)+{
++++++++++++++++return+angular.isDefined(str)+&&+str+!==+null+&&+str.length+>+0;
++++++++++++}

++++++++++++/**
+++++++++++++*+Check+if+a+string+is+upper+case
+++++++++++++*+@param+str+{string}+The+string+to+check
+++++++++++++*+@return+{boolean}+<code>true</code>+when+the+string+is+upper+case
+++++++++++++*/
++++++++++++function+isUpperCase(str)+{
++++++++++++++++return+str+===+str.toUpperCase();
++++++++++++}
++++++++}
++++};
}]);|code-block|syntax|javascript|147238|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The problem with css-ony answers is that the angular model is not updated with the view. This is because css only applies styling after rendering. 

The following directive updates the model AND remembers the cursors location

<pre><code>app.module.directive('myCapitalize', [ function () {
 'use strict';

 return {
 require: 'ngModel',
 restrict: "A",
 link: function (scope, elem, attrs, modelCtrl) {

 /* Watch the model value using a function */
 scope.$watch(function () {
 return modelCtrl.$modelValue;
 }, function (value) {

 /**
 * Skip capitalize when:
 * - the value is not defined.
 * - the value is already capitalized.
 */
 if (!isDefined(value) || isUpperCase(value)) {
 return;
 }

 /* Save selection position */
 var start = elem[0].selectionStart;
 var end = elem[0].selectionEnd;

 /* uppercase the value */
 value = value.toUpperCase();

 /* set the new value in the modelControl */
 modelCtrl.$setViewValue(value);

 /* update the view */
 modelCtrl.$render();

 /* Reset the position of the cursor */
 elem[0].setSelectionRange(start, end);
 });

 /**
 * Check if the string is defined, not null (in case of java object usage) and has a length.
 * @param str {string} The string to check
 * @return {boolean} &lt;code&gt;true&lt;/code&gt; when the string is defined
 */
 function isDefined(str) {
 return angular.isDefined(str) &amp;&amp; str !== null &amp;&amp; str.length &gt; 0;
 }

 /**
 * Check if a string is upper case
 * @param str {string} The string to check
 * @return {boolean} &lt;code&gt;true&lt;/code&gt; when the string is upper case
 */
 function isUpperCase(str) {
 return str === str.toUpperCase();
 }
 }
 };
}]);
</code></pre>

blocks|key|365457|text|生成指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365458|ng+g+directive+capitalizeFirst|code-block|syntax|javascript|365459|更新文件capitalize-first.directive.ts：|365460|import+{Directive,+ElementRef,+HostListener}+from+'@angular/core';

@Directive({
++selector:+'[appCapitalizeFirst]'
})
export+class+CapitalizeFirstDirective+{

++constructor(private+ref:+ElementRef)+{
++}

++@HostListener('input',+['$event'])
++onInput(event:+any):+void+{
++++if+(event.target.value.length+===+1)+{
++++++const+inputValue+=+event.target.value;
++++++this.ref.nativeElement.value+=+inputValue.charAt(0).toUpperCase()+%2B+inputValue.substring(1);
++++}
++}

}|365461|用法：|365462|++<input+appCapitalizeFirst>|365463|这段代码适用于Angular+11%2B|365464|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Generate directive:
<pre><code>ng g directive capitalizeFirst
</code></pre>
Update file capitalize-first.directive.ts:
<pre><code>import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
 selector: '[appCapitalizeFirst]'
})
export class CapitalizeFirstDirective {

 constructor(private ref: ElementRef) {
 }

 @HostListener('input', ['$event'])
 onInput(event: any): void {
 if (event.target.value.length === 1) {
 const inputValue = event.target.value;
 this.ref.nativeElement.value = inputValue.charAt(0).toUpperCase() + inputValue.substring(1);
 }
 }

}
</code></pre>
Usage:
<pre><code> &lt;input appCapitalizeFirst&gt;
</code></pre>
This code woks with Angular 11+

How to autocapitalize the first character in an input field inside an AngularJS form element?

I saw the jQuery solution already, but believe this has to be done differently in AngularJS by using a directive.

How to autocapitalize the first character in an input field in AngularJS?

jQuery

如何在AngularJS表单元素中自动大写输入字段中的第一个字符？我已经看到了jQuery解决方案，但我相信在AngularJS中必须通过使用指令以不同的方式来实现这一点。

问如何在AngularJS中自动大写输入字段中的第一个字符？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS中自动大写输入字段中的第一个字符？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS中自动大写输入字段中的第一个字符？
EN