Сделать первую букву строки в AngularJs заглавной

используйте этот фильтр с заглавными буквами

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>

Я бы сказал, не используйте angular / js, так как вместо этого вы можете просто использовать css:

В свой css добавьте класс:

.capitalize {
   text-transform: capitalize;
}

Затем просто оберните выражение (например) в свой html:

<span class="capitalize">{{ uppercase_expression }}</span>

Никаких js не требуется;)

Если вы используете Bootstrap, вы можете просто добавить _ 1_ вспомогательный класс:

<p class="text-capitalize">CapiTaliZed text.</p>

РЕДАКТИРОВАТЬ: на всякий случай ссылка снова умирает:

Преобразование текста

Преобразование текста в компонентах с использованием классов капитализации текста.

Текст в нижнем регистре.
ТЕКСТ В ЗАПИСИ.
Текст в заглавном.

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

Мне нравится ответ от @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>

где мы используем класс capitalize @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Итак, делая вид, что foo.awsome_property обычно печатает «FOO BAR», теперь он напечатает желаемый «Foo Bar».

Если вам нужна производительность, старайтесь избегать использования фильтров 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>

если вы хотите использовать каждое слово в строке с заглавной буквы (в процессе -> в процессе), вы можете использовать такой массив.

.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.

Для AngularJS от meanjs.org я помещаю настраиваемые фильтры в 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(" ");

}
});

Заслуга функции карты принадлежит @Naveen raj

В angular 7+ со встроенным pipe

{{ yourText | titlecase  }}

Если вы не хотите создавать собственный фильтр, вы можете напрямую использовать

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

Чтобы добавить свой собственный взгляд на эту проблему, я бы сам использовал настраиваемую директиву;

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" к строковому вводу, например - {{name | Capitalize}}

в 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 будет напечатана в верхнем регистре.

Вы можете попробовать разделить строку на две части и управлять их делом по отдельности.

{{ (Name.charAt(0) | uppercase) + "" + (Name.slice(1, element.length) | lowercase) }}

or

{{ Name.charAt(0) | uppercase }} {{ Name.slice(1, element.length) | lowercase  }}

Вы можете добавить заглавные буквы во время выполнения как:

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

{{ uppercase_expression | capitaliseFirst}} должно работать