angularjs에서 문자열의 첫 문자를 대문자로 사용하고 싶습니다.
내가 사용한 {{ uppercase_expression | uppercase}}것처럼 전체 문자열을 대문자로 변환합니다.
답변
이 대문자 필터를 사용하십시오
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() + input.substr(1).toLowerCase() : input;
}
});<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 | capitalize}}</p>
</div>
</div>답변
CSS를 대신 사용할 수 있으므로 angular / js를 사용하지 말라고 말하고 싶습니다.
CSS에서 클래스를 추가하십시오.
.capitalize {
text-transform: capitalize;
}그런 다음 html로 표현을 감싸십시오 (예 :).
<span class="capitalize">{{ uppercase_expression }}</span>JS가 필요하지 않습니다.)
답변
Bootstrap 을 사용하는 경우 간단하게 text-capitalize도우미 클래스 를 추가 할 수 있습니다 .
<p class="text-capitalize">CapiTaliZed text.</p>편집 : 링크가 다시 죽는 경우를 대비하여 :
텍스트 변환
텍스트 대문자 클래스를 사용하여 구성 요소의 텍스트를 변환합니다.
소문자 텍스트.
대문자로 된 텍스트.
CapiTaliZed Text.<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>text-capitalize는 각 단어의 첫 글자 만 변경하고 다른 글자는 영향을받지 않습니다.
답변
Angular 4 이상을 사용하는 경우 titlecase
{{toUppercase | titlecase}}파이프를 작성할 필요가 없습니다.
답변
더 좋은 방법
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});답변
성능이 저하되면 AngularJS 필터가 각 표현식마다 두 번 적용되어 안정성을 확인하므로 사용하지 마십시오.
더 나은 방법은와 CSS ::first-letter의사 요소 를 사용하는 것 입니다 text-transform: uppercase;. span그러나 와 같은 인라인 요소에는 사용할 수 없으므로 다음으로 가장 좋은 것은 text-transform: capitalize;모든 단어를 대문자 로 사용 하는 전체 블록에서 사용 하는 것입니다 .
예:
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
$scope.msg = 'hello, world.';
});.capitalize {
display: inline-block;
}
.capitalize::first-letter {
text-transform: uppercase;
}
.capitalize2 {
text-transform: capitalize;
}<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>답변
@TrampGuy의 답변이 마음에 듭니다.
CSS는 항상 (항상 그런 것은 아니지만) 더 나은 선택이므로 text-transform: capitalize;반드시 가야합니다.
그러나 컨텐츠가 모두 대문자로 시작하면 어떨까요? text-transform: capitalize;“FOO BAR”과 같은 콘텐츠 를 시도해도 여전히 “FOO BAR”이 표시됩니다. 이 문제를 해결하려면 text-transform: capitalize;CSS를 넣을 수 있지만 문자열을 소문자로 만들 수도 있습니다.
<ul>
<li class="capitalize">{{ foo.awesome_property | lowercase }}</li>
</ul>@TrampGuy의 대문자 클래스를 사용하는 곳 :
.capitalize {
text-transform: capitalize;
}따라서 foo.awsome_property일반적으로 “FOO BAR”을 인쇄 하는 척 하면 원하는 “Foo Bar”가 인쇄됩니다.
