Viết hoa chữ cái đầu tiên của chuỗi trong AngularJs

Tôi muốn viết hoa ký tự đầu tiên của chuỗi trong angularjs

Khi tôi sử dụng {{ uppercase_expression | uppercase}}nó chuyển đổi toàn bộ chuỗi sang chữ hoa.

sử dụng bộ lọc viết hoa này

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>

Tôi muốn nói không sử dụng angular / js vì bạn chỉ có thể sử dụng css thay thế:

Trong css của bạn, thêm lớp:

.capitalize {
   text-transform: capitalize;
}

Sau đó, chỉ cần bọc biểu thức (ví dụ) trong html của bạn:

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

Không cần js;)

Nếu bạn sử dụng Bootstrap , bạn chỉ cần thêm text-capitalizelớp trình trợ giúp:

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

EDIT: chỉ trong trường hợp liên kết chết một lần nữa:

Chuyển đổi văn bản

Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.

văn bản hạ cấp.
VĂN BẢN NÂNG CẤP.
CapiTaliZed Văn bản.

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

Lưu ý cách viết hoa văn bản chỉ thay đổi chữ cái đầu tiên của mỗi từ, khiến cho trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởng.

Nếu bạn đang sử dụng Angular 4+ thì bạn chỉ có thể sử dụng titlecase

{{toUppercase | titlecase}}

không phải viết bất kỳ đường ống.

một cách đẹp hơn

app.filter('capitalize', function() {
  return function(token) {
      return token.charAt(0).toUpperCase() + token.slice(1);
   }
});

Nếu bạn đang theo đuổi hiệu suất, hãy cố gắng tránh sử dụng các bộ lọc AngularJS vì chúng được áp dụng hai lần cho mỗi biểu thức để kiểm tra tính ổn định của chúng.

Một cách tốt hơn sẽ là sử dụng ::first-letterphần tử giả CSS với text-transform: uppercase;. Tuy nhiên, điều đó không thể được sử dụng cho các yếu tố nội tuyến span, vì vậy, điều tốt nhất tiếp theo sẽ là sử dụng text-transform: capitalize;trên toàn bộ khối, vốn viết hoa mỗi từ.

Thí dụ:

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>

Tôi thích câu trả lời từ @TrampGuy

CSS luôn luôn (tốt, không phải luôn luôn) là một lựa chọn tốt hơn, vì vậy: text-transform: capitalize; chắc chắn là con đường để đi.

Nhưng nếu nội dung của bạn là chữ hoa để bắt đầu thì sao? Nếu bạn thử text-transform: capitalize;nội dung như "FOO BAR", bạn vẫn sẽ nhận được "FOO BAR" trong màn hình của mình. Để giải quyết vấn đề đó, bạn có thể đặt text-transform: capitalize;css vào, nhưng cũng viết thường chuỗi của bạn, vì vậy:

<ul>
  <li class="capitalize">{{ foo.awesome_property | lowercase }}</li>
</ul>

nơi chúng tôi đang sử dụng lớp viết hoa của @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Vì vậy, giả vờ rằng foo.awsome_propertythường sẽ in "FOO BAR", giờ đây nó sẽ in "Foo Bar" mong muốn.

nếu bạn muốn viết hoa từng từ trong chuỗi (đang tiến hành -> Đang tiến hành), bạn có thể sử dụng mảng như thế này.

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

Đây là một cách khác:

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

Đối với Angular 2 trở lên, bạn có thể sử dụng {{ abc | titlecase }}.

Kiểm tra API Angular.io để biết danh sách đầy đủ.

Đối với AngularJS từ meanjs.org, tôi đặt các bộ lọc tùy chỉnh vào modules/core/client/app/init.js

Tôi cần một bộ lọc tùy chỉnh để viết hoa từng từ trong câu, đây là cách tôi làm như vậy:

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

}
});

Tín dụng của chức năng bản đồ được chuyển đến @Naveen raj

Trong 7+ góc có ống tích hợp

{{ yourText | titlecase  }}

Nếu bạn không muốn xây dựng bộ lọc tùy chỉnh thì bạn có thể sử dụng trực tiếp

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

Chỉ cần thêm vấn đề của riêng tôi vào vấn đề này, tôi sẽ tự mình sử dụng một chỉ thị tùy chỉnh;

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

Sau khi tuyên bố, bạn có thể đặt bên trong Html của bạn như dưới đây;

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

Thay vào đó nếu bạn muốn viết hoa từng từ của câu thì bạn có thể sử dụng mã này

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

và chỉ cần thêm bộ lọc "viết hoa" vào đầu vào chuỗi của bạn, ví dụ: {{name | viết hoa}}

trong Angular 4 hoặc CLI, bạn có thể tạo PIPE như thế này:

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 có 'titlecase' viết hoa chữ cái đầu tiên trong chuỗi

Ví dụ:

envName | titlecase

sẽ được hiển thị dưới dạng EnvName

Khi được sử dụng với phép nội suy, tránh tất cả các khoảng trắng như

{{envName|titlecase}}

và chữ cái giá trị đầu tiên của envName sẽ được in bằng chữ in hoa.

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

Bạn có thể thêm thời gian chạy chức năng viết hoa như:

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

{{ uppercase_expression | capitaliseFirst}} nên làm việc

Thêm vào câu trả lời của Nidhish,

Đối với những người bạn đang sử dụng AngularJs và đang tìm cách viết hoa chữ cái đầu tiên của mỗi từ trong chuỗi, hãy sử dụng mã dưới đây:

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>