Пропишіть першу літеру рядка в AngularJs


134

Я хочу використовувати великі літери рядка в angularjs

Як я використав {{ uppercase_expression | uppercase}}це перетворити цілу рядок у верхній регістр.


1
Так, вам доведеться написати якийсь код. Кутовий не зробить все за вас. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
JB Nizet

11
Це можна зробити і за допомогою CSS. Ознайомтеся з текстовим перетворенням: використання
великих

1
Ви можете використовувати це рішення, якщо дуже хочете використовувати кутовий: codepen.io/WinterJoey/pen/sfFaK
Yousef_Shamshoum

1
створіть просту директиву / фільтр, який зробить для вас першу літеру слова з великої літери ...
Pankaj Parkar

Відповіді:


234

використовувати цей фільтр з великої літери

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>


11
Ви отримуєте помилку, якщо хочете випадково використовувати великі літери. Тіло функції повинно бути таким: return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;. Якщо це не рядок, поверніть його незмінним.
Джабба

2
Тут написано спеціальний фільтр капіталізації codepen.io/WinterJoey/pen/sfFaK
Michal

148

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

У css додайте клас:

.capitalize {
   text-transform: capitalize;
}

Потім просто загорніть вираз (для колишнього) у ваш HTML:

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

Не потрібно js;)


7
Ця трансформація буде використовувати великі літери кожного слова, тому застосовна лише для рядків з одним словом
jakub.g

22
@ jakub.g Якщо ви просто хочете написати великі літери (добре, букву), просто поясніть селектор css селектором :first-letterпсевдоелементів. Що-небудь ще залишилося непокритим? :)
Фільцен

2
@Philzen Так! Як би ви це зробили лише з html? ;-)
Ромен Вінсент

@RomainVincent Що ви маєте на увазі під "лише HTML"? Можливо, моя відповідь нижче допоможе (просто натисніть «Запустити фрагмент коду», щоб побачити його в дії). Вміст HTML є статичним, вам потрібно, принаймні, ввести якийсь CSS або JS, щоб змінити його стиль, відповідно вміст DOM.
Філцен

4
Вибачте, це була невдала спроба пожартувати.
Ромен Вінсент

57

Якщо ви використовуєте Bootstrap , ви можете просто додати text-capitalizeхелперний клас:

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

EDIT: про всяк випадок, коли посилання знову загине:

Перетворення тексту

Перетворення тексту в компоненти з класами з великої літери тексту.

текст у нижньому регістрі.
ПОВЕРХНЕНИЙ ТЕКСТ.
CapiTaliZed Text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Зверніть увагу, як величина з великої літери змінює лише першу букву кожного слова, не залишаючи жодних змін літери інших букв.


Швидкий і простий спосіб досягти мети - це також велика літера з першого букви кожного слова в рядку, що круто.
kisanme

за лаштунками це просто використовуєтьсяtext-transform: capitalize;
вийшов

27

Якщо ви використовуєте Angular 4+, тоді ви можете просто використовувати titlecase

{{toUppercase | titlecase}}

не потрібно писати жодних труб.


4
Це неправильна відповідь - запитання вимагає використання великої літери першого рядка, а не першої літери кожного слова.
Алекс Петерс


18

Якщо ви працюєте після роботи, намагайтеся уникати використання фільтрів AngularJS, оскільки вони застосовуються двічі за кожне вираження, щоб перевірити їх стійкість.

Кращим способом було б використання ::first-letterпсевдоелемента CSS за допомогою 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>


1
На жаль , ::first-letterне працює на display: inlineабо display: flex, тільки display:blockабо inline-blockелементів
jakub.g

18

Мені подобається відповідь від @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".


14

якщо ви хочете писати великими літерами кожне слово з рядка (триває -> В процесі), ви можете використовувати такий масив.

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


9

Для кутових 2 і вище ви можете використовувати {{ abc | titlecase }}.

Перевірте Angular.io API для повного списку.


1
Це неправильна відповідь - запитання вимагає використання великої літери першого рядка, а не першої літери кожного слова.
Алекс Петерс

7

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


3

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



2

Якщо ви не хочете створювати спеціальний фільтр, ви можете використовувати його безпосередньо

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

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

2
Хоча цей фрагмент коду може бути вирішенням, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.
миротип

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>

1

Натомість, якщо ви хочете використовувати великі літери на кожному реченні, тоді ви можете використовувати цей код

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

і просто додайте фільтр "з великої літери" до вхідного рядка, наприклад, {{name | з великої величини}}


0

в кутовій 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;
  }
}

0

У куті є 'titlecase', який пише великі літери у рядку

Наприклад:

envName | titlecase

відображатиметься як EnvName

При використанні з інтерполяцією уникайте всіх подібних просторів

{{envName|titlecase}}

і перша літера значення envName буде надрукована у верхньому регістрі.


1
Це не надає жодної цінності відповіді вище
Іван Калоянов

1
Це неправильна відповідь - запитання вимагає використання великої літери першого рядка, а не першої літери кожного слова.
Алекс Петерс

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

-1

Ви можете додати час використання функцій з великим розміром як:

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


-2

Додавши відповідь Нідхіша,

Для людей, які ви використовуєте AngularJs і прагнете використовувати велику літеру кожного слова в рядку, використовуйте код нижче:

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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.