ใช้อักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่ใน 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>

ฉันจะบอกว่าอย่าใช้ angular / js เพราะคุณสามารถใช้ css แทน:

ใน css ของคุณเพิ่มคลาส:

.capitalize {
   text-transform: capitalize;
}

จากนั้นห่อนิพจน์ (เช่น) ใน html ของคุณ:

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

ไม่จำเป็นต้องใช้ js;)

หากคุณใช้Bootstrapคุณสามารถเพิ่มtext-capitalizeคลาสตัวช่วย:

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

แก้ไข: ในกรณีที่ลิงก์ตายอีกครั้ง:

การแปลงข้อความ

แปลงข้อความในคอมโพเนนต์ด้วยคลาสอักษรตัวพิมพ์ใหญ่

ข้อความที่ลดลง
ข้อความที่เพิ่มขึ้น
ข้อความ CapiTaliZed

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

สังเกตว่าการใช้อักษรตัวพิมพ์ใหญ่จะเปลี่ยนเฉพาะอักษรตัวแรกของแต่ละคำอย่างไรโดยปล่อยให้ตัวอักษรอื่นไม่ได้รับผลกระทบ

หากคุณใช้ Angular 4+ คุณสามารถใช้ไฟล์ titlecase

{{toUppercase | titlecase}}

ไม่ต้องเขียนท่อใด ๆ

วิธีที่ดีกว่า

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

หากคุณอยู่หลังการแสดงพยายามหลีกเลี่ยงการใช้ตัวกรอง 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>

ฉันชอบคำตอบจาก @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สำหรับรายการทั้งหมด

สำหรับ 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

ในเชิงมุม 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(' '); 
  }
});

และเพิ่มตัวกรอง "ตัวพิมพ์ใหญ่" ให้กับอินพุตสตริงของคุณเช่น - {{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();
}

คุณสามารถลองแบ่ง String ของคุณออกเป็นสองส่วนและจัดการเคสแยกกัน

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

หรือ

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

คุณสามารถเพิ่มเวลาทำงานของฟังก์ชันตัวพิมพ์ใหญ่เป็น:

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

{{ uppercase_expression | capitaliseFirst}} ควรทำงาน