Заглавная первая буква строки в AngularJs

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

в вашем css добавьте класс:

.capitalize {
   text-transform: capitalize;
}

затем просто оберните выражение (например,) в HTML:

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

не требуется js ;)

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

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

лучшего

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's capitalize класс:

.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(' ') : '';
    }
});

Если вы используете Angular 4+, то вы можете просто использовать titlecase

{{toUppercase | titlecase}}

не нужно писать какие-то трубы.

.capitalize {
  display: inline-block;
}

.capitalize:first-letter {
  font-size: 2em;
  text-transform: capitalize;
}

<span class="capitalize">
  really, once upon a time there was a badly formatted output coming from my backend, <strong>all completely in lowercase</strong> and thus not quite as fancy-looking as could be - but then cascading style sheets (which we all know are <a href="http://9gag.com/gag/6709/css-is-awesome">awesome</a>) with modern pseudo selectors came around to the rescue...
</span>

для угловых 2 и выше, вы можете использовать {{ abc | titlecase }}.

Регистрация Угловое.API для ввода-вывода для получения полного списка.

это другой способ:

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

для 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

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

{{ 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 вы можете создать трубу, как это:

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

var app = angular.module("app", []);
app.filter('capitalize', function() {
    return function(str) {
        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;
    }
});

Angular имеет "titlecase", который заглавной буквой первой буквы в строке

например:

envName | titlecase

будет отображаться как EnvName

при использовании с интерполяцией избегайте всех пробелов, таких как

{{envName|titlecase}}

и первая буква значения envName будет напечатана в верхнем регистре.

вы можете добавить время выполнения функции capitalize как:

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

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