AngularJS - JSON에서 제목 대소문자로 텍스트 리턴 서식 지정
JSON 파일에서 데이터를 불러오는 서비스를 가지고 있습니다.
데이터 내의 일부 데이터는 모두 대문자로 표시됩니다.다음은 예를 들어 다음과 같습니다.
$scope.FootballClubs = [{
CompanyName: [MANCHESTER UNITED, LIVERPOOL FOOTBALL CLUB, CHELSEA, WIGAN UNTIED, LEICESTER CITY]
}];
그리고 제 HTML에서는 위의 내용을 간단히 설명하겠습니다.
<div ng-repeat="name in FootballClubs">
{{ name.CompanyName }}
</div>
다음 중 어느 것이 제외됩니까?
MANCHESTER UNITED
LIVERPOOL FOOTBALL CLUB
CHELSEA
WIGAN UNTIED
LEICESTER CITY
표시하려는 내용은 다음과 같습니다.
Manchester United
Liverpool Football Club
Chelsea
Wigan United
Leicester City
필터는 이 목적을 위한 이상적인 솔루션입니다.
<div ng-repeat="name in FootballClubs">
{{ name.CompanyName | titleCase }}
</div>
그래서 필터 자체가
angular.module('myFootballModule', [])
.filter('titleCase', function() {
return function(input) {
input = input || '';
return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};
})
구현은 쉬우나 UI만의 솔루션에 의존하지 않는 비방향적인 방법을 제시하겠습니다.먼저 소문자로 변경합니다.{{name.CompanyName.toLowerCase()}}
가장 쉬운 방법은 (스타일 태그, 클래스 등을 통해) CSS 포맷을 하는 것이라고 생각합니다.
<div ng-repeat="name in FootballClubs" style="text-transform:capitalize;">
{{ name.CompanyName.toLowerCase() }}
</div>
다음은 데모입니다.http://plnkr.co/edit/S4xtIRApMjKe0yQGREq5?p=preview
HTML에서 이 div를 사용하세요.
<div ng-repeat="name in FootballClubs">
{{ name.CompanyName | titleCase:CompanyName }}
</div>
언급URL : https://stackoverflow.com/questions/24039226/angularjs-format-text-return-from-json-to-title-case
'programing' 카테고리의 다른 글
요소 내부에 각도 js 템플릿 문자열을 삽입합니다. (0) | 2023.03.10 |
---|---|
mongoose에서 id와 _id의 차이점은 무엇입니까? (0) | 2023.03.10 |
Android의 URL에서 JSON을 해석하여 목록 보기에 표시 (0) | 2023.03.10 |
Meteor Publish/Subscribe 이해 (0) | 2023.03.10 |
AngularJS: 컨트롤러와 서비스 (0) | 2023.03.05 |