blocks|key|4505950|text|使用此大写过滤器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4505951|​|4505952|var+app+=+angular.module('app',+[]);

app.controller('Ctrl',+function+($scope)+{
+++$scope.msg+=+'hello,+world.';
});

app.filter('capitalize',+function()+{
++++return+function(input)+{
++++++return+(angular.isString(input)+&&+input.length+>+0)+?+input.charAt(0).toUpperCase()+%2B+input.substr(1).toLowerCase()+:+input;
++++}
});|code-block|syntax|javascript|4505953|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div+ng-app="app">
++++<div+ng-controller="Ctrl">
++++++++<p><b>My+Text:</b>+{{msg+%7C+capitalize}}</p>
++++</div>
</div>|4505954|4505955|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>use this capitalize filter</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});

app.filter('capitalize', function() {
    return function(input) {
      return (angular.isString(input) &amp;&amp; input.length &gt; 0) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : input;
    }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app"&gt;
    &lt;div ng-controller="Ctrl"&gt;
        &lt;p&gt;&lt;b&gt;My Text:&lt;/b&gt; {{msg | capitalize}}&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4506367|text|我要说的是，不要使用angular/js，因为你可以简单地使用css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506368|在css中，添加类：|4506369|.capitalize+{
+++text-transform:+capitalize;
}|code-block|syntax|javascript|4506370|然后，只需将表达式(用于ex)包装在html中：|4506371|<span+class="capitalize">{{+uppercase_expression+}}</span>|4506372|不需要js+;)|4506373|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I'd say don't use angular/js as you can simply use css instead:</p>

<p>In your css, add the class:</p>

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

<p>Then, simply wrap the expression (for ex) in your html:</p>

<pre><code>&lt;span class="capitalize"&gt;{{ uppercase_expression }}&lt;/span&gt;
</code></pre>

<p>No js needed ;)</p>


blocks|key|4507366|text|如果您使用的是Angular+4%2B，那么您可以只使用titlecase|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4507367|{{toUppercase+%7C+titlecase}}|code-block|syntax|javascript|4507368|不需要编写任何管道。|4507369|entityMap^0|Q|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>If you are using Angular 4+ then you can just use <code>titlecase</code></p>

<pre><code>{{toUppercase | titlecase}}
</code></pre>

<p>don't have to write any pipes.</p>


blocks|key|4505987|text|一种更好的方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4505988|app.filter('capitalize',+function()+{
++return+function(token)+{
++++++return+token.charAt(0).toUpperCase()+%2B+token.slice(1);
+++}
});|code-block|syntax|javascript|4505989|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>a nicer way </p>

<pre><code>app.filter('capitalize', function() {
  return function(token) {
      return token.charAt(0).toUpperCase() + token.slice(1);
   }
});
</code></pre>


blocks|key|4506438|text|我喜欢@TrampGuy的答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506439|CSS总是(好吧，并不总是)一个更好的选择，所以：text-transform:+capitalize;肯定是个不错的选择。|offset|length|style|CODE|4506440|但是如果你的内容一开始就全是大写呢？如果你在像"FOO+BAR“这样的内容上尝试text-transform:+capitalize;，你仍然会在你的显示器上看到"FOO+BAR”。为了解决这个问题，你可以把text-transform:+capitalize;放在你的css中，但也要把你的字符串小写，所以：|4506441|<ul>
++<li+class="capitalize">{{+foo.awesome_property+%7C+lowercase+}}</li>
</ul>|code-block|syntax|javascript|4506442|在这里我们使用@TrampGuy的capitalize类：|4506443|.capitalize+{
++text-transform:+capitalize;
}|4506444|因此，假装foo.awsome_property将正常打印"FOO+BAR"，现在它将打印所需的"Foo+Bar“。|4506445|entityMap^0|0|P|R|0|14|R|2W|R|0|0|0|0|5|J|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|V|$]]

<p>I like the answer from @TrampGuy</p>

<p>CSS is always (well, not always) a better choice, so: <code>text-transform: capitalize;</code> is certainly the way to go.</p>

<p>But what if your content is all uppercase to begin with?  If you try <code>text-transform: capitalize;</code> on content like "FOO BAR" you'll still get "FOO BAR" in your display.  To get around that issue you could put the <code>text-transform: capitalize;</code> in your css, but also lowercase your string, so:</p>

<pre><code>&lt;ul&gt;
  &lt;li class="capitalize"&gt;{{ foo.awesome_property | lowercase }}&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>where we are using @TrampGuy's capitalize class:</p>

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

<p>So, pretending that <code>foo.awsome_property</code> would normally print "FOO BAR", it will now print the desired "Foo Bar".</p>


blocks|key|4506133|text|如果您追求的是性能，请尽量避免使用AngularJS过滤器，因为每个表达式都会应用它们两次，以检查它们的稳定性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506134|一种更好的方法是在text-transform:+uppercase;中使用CSS+::first-letter伪元素。但是，这不能用于内联元素，比如span，所以下一个最好的方法是在整个块上使用text-transform:+capitalize;，它将每个单词都大写。|offset|length|style|CODE|4506135|示例：|4506136|​|4506137|var+app+=+angular.module('app',+[]);

app.controller('Ctrl',+function+($scope)+{
+++$scope.msg+=+'hello,+world.';
});|code-block|syntax|javascript|4506138|.capitalize+{
++display:+inline-block;++
}

.capitalize::first-letter+{
++text-transform:+uppercase;
}

.capitalize2+{
++text-transform:+capitalize;
}|4506139|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div+ng-app="app">
++++<div+ng-controller="Ctrl">
++++++++<b>My+text:</b>+<div+class="capitalize">{{msg}}</div>
++++++++<p><b>My+text:</b>+<span+class="capitalize2">{{msg}}</span></p>
++++</div>
</div>|4506140|4506141|entityMap^0|0|9|Q|16|E|23|4|2Q|R|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|S|3|T|5|N|7|1B|8|@]|9|@]|A|$O|P]]|$1|U|3|K|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|W|$]]

<p>If you are after performance, try to avoid using AngularJS filters as they are applied twice per each expression to check for their stability.</p>

<p>A better way would be to use CSS <code>::first-letter</code> pseudo-element with <code>text-transform: uppercase;</code>. That can't be used on inline elements such as <code>span</code>, though, so the next best thing would be to use <code>text-transform: capitalize;</code> on the whole block, which capitalizes every word.</p>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.capitalize {
  display: inline-block;  
}

.capitalize::first-letter {
  text-transform: uppercase;
}

.capitalize2 {
  text-transform: capitalize;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app"&gt;
    &lt;div ng-controller="Ctrl"&gt;
        &lt;b&gt;My text:&lt;/b&gt; &lt;div class="capitalize"&gt;{{msg}}&lt;/div&gt;
        &lt;p&gt;&lt;b&gt;My text:&lt;/b&gt; &lt;span class="capitalize2"&gt;{{msg}}&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4506031|text|如果你想把字符串中的每个单词都大写(正在进行中的数组中)，你可以像这样使用->。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506032|.filter('capitalize',+function()+{
++++return+function(input)+{
++++++++return+(!!input)+?+input.split('+').map(function(wrd){return+wrd.charAt(0).toUpperCase()+%2B+wrd.substr(1).toLowerCase();}).join('+')+:+'';
++++}
});|code-block|syntax|javascript|4506033|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>if you want capitalize each word from string (in progress -> In Progress), you can use array like this.</p>

<pre><code>.filter('capitalize', function() {
    return function(input) {
        return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
    }
});
</code></pre>


blocks|key|4507267|text|这是另一种方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4507268|{{some_str+%7C+limitTo:1+%7C+uppercase}}{{some_str.substr(1)+%7C+lowercase+}}|code-block|syntax|javascript|4507269|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is another way:</p>

<pre><code>{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
</code></pre>


blocks|key|4507196|text|对于Angular+2和更高版本，可以使用{{+abc+%7C+titlecase+}}。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4507197|有关完整列表，请查看Angular.io+API。|4507198|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api^0|L|L|0|A|E|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>For Angular 2 and up, you can use <code>{{ abc | titlecase }}</code>.</p>

<p>Check <a href="https://angular.io/api" rel="noreferrer">Angular.io API</a> for complete list.</p>


blocks|key|4506742|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506743|.capitalize+{
++display:+inline-block;
}

.capitalize:first-letter+{
++font-size:+2em;
++text-transform:+capitalize;
}|code-block|syntax|javascript|4506744|<span+class="capitalize">
++really,+once+upon+a+time+there+was+a+badly+formatted+output+coming+from+my+backend,+<strong>all+completely+in+lowercase</strong>+and+thus+not+quite+as+fancy-looking+as+could+be+-+but+then+cascading+style+sheets+(which+we+all+know+are+<a+href="http://9gag.com/gag/6709/css-is-awesome">awesome</a>)+with+modern+pseudo+selectors+came+around+to+the+rescue...
</span>|4506745|4506746|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.capitalize {
  display: inline-block;
}

.capitalize:first-letter {
  font-size: 2em;
  text-transform: capitalize;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="capitalize"&gt;
  really, once upon a time there was a badly formatted output coming from my backend, &lt;strong&gt;all completely in lowercase&lt;/strong&gt; and thus not quite as fancy-looking as could be - but then cascading style sheets (which we all know are &lt;a href="http://9gag.com/gag/6709/css-is-awesome"&gt;awesome&lt;/a&gt;) with modern pseudo selectors came around to the rescue...
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4506072|text|对于来自meanjs.org的AngularJS，我将自定义过滤器放在modules/core/client/app/init.js中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4506073|我需要一个自定义的过滤器来大写句子中的每个单词，下面是我是如何做到的：|4506074|angular.module(ApplicationConfiguration.applicationModuleName).filter('capitalize',+function()+{
return+function(str)+{
++++return+str.split("+").map(function(input){return+(!!input)+?+input.charAt(0).toUpperCase()+%2B+input.substr(1).toLowerCase()+:+++++++++''}).join("+");

}
});|code-block|syntax|javascript|4506075|地图函数的功劳归功于@Naveen+raj|4506076|entityMap^0|Z|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>For the AngularJS from meanjs.org, I place the custom filters in <code>modules/core/client/app/init.js</code></p>

<p>I needed a custom filter to capitalize each word in a sentence, here is how I do so:</p>

<pre><code>angular.module(ApplicationConfiguration.applicationModuleName).filter('capitalize', function() {
return function(str) {
    return str.split(" ").map(function(input){return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() :         ''}).join(" ");

}
});
</code></pre>

<p>The credit of the map function goes to @Naveen raj</p>


blocks|key|4507522|text|在具有内置pipe的angular+7%2B中|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4507523|{{+yourText+%7C+titlecase++}}|code-block|syntax|javascript|4507524|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/TitleCasePipe^0|5|4|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]]]]

<p>In angular 7+ which has built-in <a href="https://angular.io/api/common/TitleCasePipe" rel="nofollow noreferrer">pipe</a>  </p>

<pre><code>{{ yourText | titlecase  }}
</code></pre>


blocks|key|4506883|text|如果你不想构建自定义过滤器，那么你可以直接使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506884|{{+foo.awesome_property.substring(0,1)+%7C+uppercase}}{{foo.awesome_property.substring(1)}}|code-block|syntax|javascript|4506885|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you don't want to build custom filter then  you can use directly</p>

<pre><code>{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
</code></pre>


blocks|key|4507273|text|var+app+=+angular.module("app",+[]);
app.filter('capitalize',+function()+{
++++return+function(str)+{
++++++++if+(str+===+undefined)+return;+//+avoid+undefined
++++++++str+=+str.toLowerCase().split("+");
++++++++var+c+=+'';
++++++++for+(var+i+=+0;+i+<=+(str.length+-+1);+i%2B%2B)+{
++++++++++++var+word+=+'+';
++++++++++++for+(var+j+=+0;+j+<+str[i].length;+j%2B%2B)+{
++++++++++++++++c+=+str[i][j];
++++++++++++++++if+(j+===+0)+{
++++++++++++++++++++c+=+c.toUpperCase();
++++++++++++++++}
++++++++++++++++word+%2B=+c;
++++++++++++}
++++++++++++str[i]+=+word;
++++++++}
++++++++str+=+str.join('');
++++++++return+str;
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4507274|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var app = angular.module("app", []);
app.filter('capitalize', function() {
    return function(str) {
        if (str === undefined) return; // avoid undefined
        str = str.toLowerCase().split(" ");
        var c = '';
        for (var i = 0; i &lt;= (str.length - 1); i++) {
            var word = ' ';
            for (var j = 0; j &lt; str[i].length; j++) {
                c = str[i][j];
                if (j === 0) {
                    c = c.toUpperCase();
                }
                word += c;
            }
            str[i] = word;
        }
        str = str.join('');
        return str;
    }
});
</code></pre>


blocks|key|4506258|text|为了补充我自己对这个问题的看法，我会自己使用一个自定义指令；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506259|app.directive('capitalization',+function+()+{
return+{
++++require:+'ngModel',
++++link:+function+(scope,+element,+attrs,+modelCtrl)+{

++++++++modelCtrl.$parsers.push(function+(inputValue)+{

++++++++++++var+transformedInput+=+(!!inputValue)+?+inputValue.charAt(0).toUpperCase()+%2B+inputValue.substr(1).toLowerCase()+:+'';

++++++++++++if+(transformedInput+!=+inputValue)+{
++++++++++++++++modelCtrl.$setViewValue(transformedInput);
++++++++++++++++modelCtrl.$render();
++++++++++++}

++++++++++++return+transformedInput;
++++++++});
++++}
};|code-block|syntax|javascript|4506260|声明后，您可以将其放入Html中，如下所示；|4506261|<input+ng-model="surname"+ng-trim="false"+capitalization>|4506262|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|$]]

<p>Just to add my own take on this issue, I would use a custom directive myself;</p>

<pre><code>app.directive('capitalization', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, modelCtrl) {

        modelCtrl.$parsers.push(function (inputValue) {

            var transformedInput = (!!inputValue) ? inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase() : '';

            if (transformedInput != inputValue) {
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
            }

            return transformedInput;
        });
    }
};
</code></pre>

<p>Once declared you can place inside your Html as below;</p>

<pre><code>&lt;input ng-model="surname" ng-trim="false" capitalization&gt;
</code></pre>


blocks|key|4506657|text|相反，如果您想要将句子中的每个单词大写，则可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4506658|app.filter('capitalize',+function()+{


return+function(input,+scope)+{
if+(input!=null)
input+=+input.toLowerCase().split('+');

for+(var+i+=+0;+i+<+input.length;+i%2B%2B)+{
+++//+You+do+not+need+to+check+if+i+is+larger+than+input+length,+as+your+for+does+that+for+you
+++//+Assign+it+back+to+the+array
+++input[i]+=+input[i].charAt(0).toUpperCase()+%2B+input[i].substring(1);+++++


}
+++//+Directly+return+the+joined+string
+++return+input.join('+');+
++}
});|code-block|syntax|javascript|4506659|只需将过滤器"capitalize“添加到字符串输入中，例如{{name+%7C+capitalize}}|4506660|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Instead if you want to capitalize each word of a sentence then you can use this code</p>

<pre><code>app.filter('capitalize', function() {


return function(input, scope) {
if (input!=null)
input = input.toLowerCase().split(' ');

for (var i = 0; i &lt; input.length; i++) {
   // You do not need to check if i is larger than input length, as your for does that for you
   // Assign it back to the array
   input[i] = input[i].charAt(0).toUpperCase() + input[i].substring(1);     


}
   // Directly return the joined string
   return input.join(' '); 
  }
});
</code></pre>

<p>and just add filter "capitalize" to your string input, for ex - {{name | capitalize}}</p>


blocks|key|4507151|text|在Angular+4或CLI中，您可以像这样创建管道：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4507152|import+{+Pipe,+PipeTransform+}+from+'@angular/core';
@Pipe({
++name:+'capitalize'
})
/**
+*+Place+the+first+letter+of+each+word+in+capital+letters+and+the+other+in+lower+case.+Ex:+The+LORO+speaks+=+The+Loro+Speaks
+*/
export+class+CapitalizePipe+implements+PipeTransform+{
++transform(value:+any):+any+{
++++value+=+value.replace('++',+'+');
++++if+(value)+{
++++++let+w+=+'';
++++++if+(value.split('+').length+>+0)+{
++++++++value.split('+').forEach(word+=>+{
++++++++++w+%2B=+word.charAt(0).toUpperCase()+%2B+word.toString().substr(1,+word.length).toLowerCase()+%2B+'+'
++++++++});
++++++}+else+{
++++++++w+=+value.charAt(0).toUpperCase()+%2B+value.toString().substr(1,+value.length).toLowerCase();
++++++}
++++++return+w;
++++}
++++return+value;
++}
}|code-block|syntax|javascript|4507153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in Angular 4 or CLI you can create a PIPE like this:</p>

<pre><code>import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'capitalize'
})
/**
 * Place the first letter of each word in capital letters and the other in lower case. Ex: The LORO speaks = The Loro Speaks
 */
export class CapitalizePipe implements PipeTransform {
  transform(value: any): any {
    value = value.replace('  ', ' ');
    if (value) {
      let w = '';
      if (value.split(' ').length &gt; 0) {
        value.split(' ').forEach(word =&gt; {
          w += word.charAt(0).toUpperCase() + word.toString().substr(1, word.length).toLowerCase() + ' '
        });
      } else {
        w = value.charAt(0).toUpperCase() + value.toString().substr(1, value.length).toLowerCase();
      }
      return w;
    }
    return value;
  }
}
</code></pre>


blocks|key|4507437|text|Angular有'titlecase‘，它大写字符串中的第一个字母|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4507438|对于ex：|4507439|envName+%7C+titlecase|code-block|syntax|javascript|4507440|将显示为EnvName|4507441|当与插值一起使用时，避免所有空格，如|4507442|{{envName%7Ctitlecase}}|4507443|envName的值的第一个字母将以大写字母打印。|4507444|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|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Angular has 'titlecase' which capitalizes the first letter in a string</p>

<p>For ex:</p>

<pre><code>envName | titlecase
</code></pre>

<p>will be displayed as  EnvName</p>

<p>When used with interpolation, avoid all spaces like</p>

<pre><code>{{envName|titlecase}}
</code></pre>

<p>and the first letter of value of envName will be printed in upper case. </p>


blocks|key|4507448|text|if+(value){
++value+=+(value.length+>+1)+?+value[0].toUpperCase()+%2B+value.substr(1).toLowerCase()+:+value.toUpperCase();
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4507449|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if (value){
  value = (value.length &gt; 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}
</code></pre>


blocks|key|36|text|您可以尝试将字符串拆分为两部分，并分别管理它们的大小写。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|37|{{+(Name.charAt(0)+%7C+uppercase)+%2B+""+%2B+(Name.slice(1,+element.length)+%7C+lowercase)+}}|code-block|syntax|javascript|38|或|39|{{+Name.charAt(0)+%7C+uppercase+}}+{{+Name.slice(1,+element.length)+%7C+lowercase++}}|40|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|$]]

<p>You can try to split your String into two parts and manage their case separately.</p>
<pre><code>{{ (Name.charAt(0) | uppercase) + &quot;&quot; + (Name.slice(1, element.length) | lowercase) }}
</code></pre>
<p>or</p>
<pre><code>{{ Name.charAt(0) | uppercase }} {{ Name.slice(1, element.length) | lowercase  }}
</code></pre>


blocks|key|4507035|text|您可以添加capitalize功能运行时，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4507036|<td>{{lastName.charAt(0).toUpperCase()%2B+lastName.substr(1).toLowerCase()}}</td>|code-block|syntax|javascript|4507037|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can add capitalize functionality run time as:</p>

<pre><code>&lt;td&gt;{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}&lt;/td&gt;
</code></pre>


blocks|key|4507046|text|{{+uppercase_expression+%7C+capitaliseFirst}}应该可以工作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4507047|entityMap^0|0|17|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>{{ uppercase_expression | capitaliseFirst}}</code> should work</p>


<p>I want capitalize first character of string in angularjs</p>

<p>As i used <code>{{ uppercase_expression | uppercase}}</code> it convert whole string to upper case.</p>


Capitalize the first letter of string in AngularJs

我想用angularjs大写字符串的第一个字符当我使用{{ uppercase_expression | uppercase}}时，它将整个字符串转换为大写。

问AngularJs中字符串的第一个字母大写
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs中字符串的第一个字母大写EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs中字符串的第一个字母大写
EN