AngularJs에서 첫 번째 문자열을 대문자로

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"가 인쇄됩니다.

문자열에서 각 단어를 대문자로 사용하려면 (진행 중-> 진행 중) 다음과 같이 배열을 사용할 수 있습니다.

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

이것은 다른 방법입니다.

{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}

Angular 2 이상에서는 {{ abc | titlecase }} .

전체 목록은 Angular.io API 를 확인하십시오 .

meanjs.org의 AngularJS의 경우 사용자 정의 필터를 modules/core/client/app/init.js

문장에서 각 단어를 대문자로하기 위해 맞춤 필터가 필요했습니다.

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(" ");

}
});

map 함수의 크레디트는 @Naveen raj로갑니다.

파이프 가 내장 된 앵귤러 7+

{{ yourText | titlecase  }}

사용자 정의 필터를 작성하지 않으려는 경우 직접 사용할 수 있습니다

{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}

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++) {
            var word = ' ';
            for (var j = 0; j < str[i].length; j++) {
                c = str[i][j];
                if (j === 0) {
                    c = c.toUpperCase();
                }
                word += c;
            }
            str[i] = word;
        }
        str = str.join('');
        return str;
    }
});

이 문제에 대한 내 의견을 추가하기 위해 직접 사용자 지정 지시문을 사용합니다.

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;
        });
    }
};

선언되면 아래와 같이 HTML 안에 넣을 수 있습니다.

<input ng-model="surname" ng-trim="false" capitalization>

대신 문장의 각 단어를 대문자로 사용하려면이 코드를 사용할 수 있습니다

app.filter('capitalize', function() {


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

for (var i = 0; i < 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(' '); 
  }
});

예를 들어 문자열 입력에 "capitalize"필터를 추가하면됩니다 (예 : ex-{{name | 대문자}}

Angular 4 또는 CLI에서 다음과 같은 PIPE를 만들 수 있습니다.

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 += 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;
  }
}

Angular에는 문자열의 첫 글자를 대문자로하는 'titlecase'가 있습니다

예를 들어 :

envName | titlecase

EnvName으로 표시됩니다

보간과 함께 사용하는 경우 다음과 같은 모든 공백을 피하십시오

{{envName|titlecase}}

envName의 첫 번째 문자는 대문자로 인쇄됩니다.

if (value){
  value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}

다음과 같이 대문자 사용 기능 런타임을 추가 할 수 있습니다.

<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>

{{ uppercase_expression | capitaliseFirst}} 작동해야합니다

니 디시의 대답에 덧붙여서

AngularJ를 사용 하고 문자열에서 각 단어의 첫 글자 를 대문자로 사용하려는 사람들 은 아래 코드를 사용하십시오.

var app = angular.module('app', []);

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

app.filter('titlecase', function() {
    return function(input) {
      //Check for valid string
      if(angular.isString(input) && input.length > 0) {
        var inputArray = input.split(' ');
        for(var i=0; i<inputArray.length; i++) {
          var value = inputArray[i];
          inputArray[i] =  value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        }
        return inputArray.join(' ');
      } else {
        return 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 | titlecase}}</p>
    </div>
</div>