programing

AngularJS - JSON에서 제목 대소문자로 텍스트 리턴 서식 지정

stoneblock 2023. 3. 10. 21:01

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