AngularJs में स्ट्रिंग के पहले अक्षर को कैपिटलाइज़ करें

Question

मैं angularjs में स्ट्रिंग के पहले चरित्र को कैपिटलाइज़ करना चाहता हूं

जैसा कि मैंने इसका उपयोग {{ uppercase_expression | uppercase}}पूरे स्ट्रिंग को ऊपरी मामले में बदल दिया।

Comments

हां, आपको कुछ कोड लिखना होगा। कोणीय आपके लिए सब कुछ नहीं करेगा । developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— जेबी निज़ाम

यह सीएसएस का उपयोग करके भी किया जा सकता है .. पाठ-परिवर्तन की जांच करें: संपत्ति को कैपिटल करें

— रामानाथन मुथुरमन

आप इस समाधान का उपयोग कर सकते हैं अगर आप वास्तव में कोणीय का उपयोग करना चाहते हैं: codepen.io/WinterJoey/pen/sfFaK

— Yousef_Shamshoum

एक सरल निर्देश / फ़िल्टर बनाएँ जो आपके लिए शब्द पूँजी का पहला अक्षर बनाएगा ...

— पंकज पारकर

Answer 1

इस कैपिटल फिल्टर का उपयोग करें

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>

Comments

यदि आप किसी संख्या को गलती से भुनाना चाहते हैं तो आपको एक त्रुटि मिलती है। फ़ंक्शन का शरीर यह होना चाहिए return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;:। यदि यह एक तार नहीं है, तो इसे अपरिवर्तित लौटा दें।

— जबा डेब

यहाँ कस्टम कैपिटलाइज़ेशन फ़िल्टर कोडपेन

— Michal

Answer 2

मैं कहूंगा कि कोणीय / js का उपयोग न करें क्योंकि आप इसके बजाय बस सीएसएस का उपयोग कर सकते हैं:

अपनी सीएसएस में, वर्ग जोड़ें:

.capitalize {
   text-transform: capitalize;
}

फिर, अपने HTML में केवल एक्सप्रेशन (पूर्व के लिए) लपेटें:

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

कोई जे एस की जरूरत;)

Comments

यह परिवर्तन प्रत्येक शब्द के पहले अक्षर को कैपिटल करेगा इसलिए केवल एक-शब्द स्ट्रिंग्स पर लागू होता है

— jakub.g

@ jakub.g यदि आपका पहला शब्द (अच्छी तरह से, अक्षर) को कैपिटलाइज़ करना है, तो बस :first-letterpseudo-element चयनकर्ता के साथ css चयनकर्ता का अन्वेषण करें । और कुछ भी खुला छोड़ दिया? :)

— फिलाजेन

@Philzen हाँ! आप इसे केवल html के साथ कैसे करेंगे? ;-)

— रोमेन विंसेंट

@RomainVincent "HTML केवल" से आपका क्या तात्पर्य है? हो सकता है कि नीचे दिए गए मेरे जवाब से मदद मिलती है (कार्रवाई में इसे देखने के लिए "रन कोड स्निपेट पर क्लिक करें")। HTML सामग्री स्थिर है, आपको अपनी स्टाइल को क्रमशः DOM सामग्री को संशोधित करने के लिए कुछ CSS या JS में फेंकने की आवश्यकता होगी।

— फिलजेन

मुझे खेद है, यह मजाक बनाने का एक बुरा प्रयास था।

— रोमेन विन्सेंट

Answer 3

यदि आप बूटस्ट्रैप का उपयोग करते हैं , तो आप बस text-capitalizeसहायक वर्ग जोड़ सकते हैं :

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

EDIT: लिंक के फिर से मरने की स्थिति में:

पाठ रूपांतरण

टेक्स्ट कैपिटलाइज़ेशन क्लासेस के साथ कंपोनेंट्स में टेक्स्ट ट्रांसफ़ॉर्म करें।

पाठ घटाया।
अद्यतन पाठ।
CapiTaliZed पाठ।

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

ध्यान दें कि टेक्स्ट-कैपिटलाइज़ केवल प्रत्येक शब्द के पहले अक्षर को बदल देता है, किसी अन्य पत्र के मामले को अप्रभावित छोड़ देता है।

Comments

लक्ष्य प्राप्त करने का त्वरित और आसान तरीका, यह भी स्ट्रिंग में प्रत्येक शब्द के पहले अक्षर को कैपिटल करता है, जो शांत है।

— किशनमे

पर्दे के पीछे यह सिर्फ इस्तेमाल कर रहा हैtext-transform: capitalize;

— 21

Answer 4

यदि आप Angular 4+ का उपयोग कर रहे हैं तो आप बस उपयोग कर सकते हैं titlecase

{{toUppercase | titlecase}}

किसी भी पाइप को लिखने की ज़रूरत नहीं है।

Comments

यह एक गलत उत्तर है - यह प्रश्न स्ट्रिंग के पहले अक्षर को कैपिटलाइज़ करने के लिए कहता है, हर शब्द के पहले अक्षर को नहीं।

— एलेक्स पीटर्स

Answer 5

एक अच्छा तरीका है

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

Answer 6

यदि आप प्रदर्शन के बाद हैं, तो AngularJS फ़िल्टर का उपयोग करने से बचने की कोशिश करें क्योंकि वे प्रत्येक स्थिरता के लिए जाँच करने के लिए प्रत्येक अभिव्यक्ति पर दो बार लागू होते हैं।

सीएसएस ::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>

Comments

दुर्भाग्य से या , केवल या तत्वों पर::first-letterdisplay: inlinedisplay: flexdisplay:blockinline-block

— jakub.g

Answer 7

मुझे @TrampGuy का जवाब पसंद है

CSS हमेशा एक बेहतर विकल्प है (ठीक है, हमेशा नहीं), इसलिए: text-transform: capitalize;निश्चित रूप से जाने का रास्ता है।

लेकिन क्या होगा अगर आपकी सामग्री सभी बड़े अक्षरों में शुरू हो? यदि आप text-transform: capitalize;"FOO BAR" जैसी सामग्री पर प्रयास करते हैं, तो भी आपको अपने प्रदर्शन में "FOO BAR" मिलेगा। उस समस्या को हल करने के लिए आप text-transform: capitalize;अपनी सीएसएस में रख सकते हैं , लेकिन अपनी स्ट्रिंग को भी नीचे कर सकते हैं, इसलिए:

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

जहां हम @ TrampGuy के पूंजीकरण वर्ग का उपयोग कर रहे हैं:

.capitalize {
  text-transform: capitalize;
}

तो, foo.awsome_propertyयह दिखाते हुए कि सामान्य रूप से "फू बार" प्रिंट होगा, अब यह वांछित "फू बार" प्रिंट करेगा।

Answer 8

यदि आप स्ट्रिंग से प्रत्येक शब्द को कैपिटलाइज़ करना चाहते हैं (प्रगति में -> प्रगति में), तो आप इस तरह से सरणी का उपयोग कर सकते हैं।

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

Answer 9

यह एक और तरीका है:

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

Answer 10

कोणीय 2 और ऊपर के लिए, आप उपयोग कर सकते हैं {{ abc | titlecase }}।

पूरी सूची के लिए Angular.io एपीआई की जाँच करें ।

Comments

यह एक गलत उत्तर है - यह प्रश्न स्ट्रिंग के पहले अक्षर को कैपिटलाइज़ करने के लिए कहता है, हर शब्द के पहले अक्षर को नहीं।

— एलेक्स पीटर्स

Answer 11

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

Answer 12

Meanjs.org से AngularJS के लिए, मैं कस्टम फ़िल्टर को इसमें रखता हूँ 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(" ");

}
});

मानचित्र समारोह का श्रेय @ नवीन नवीन को जाता है

Answer 13

कोणीय 7+ में जो अंतर्निहित पाइप है

{{ yourText | titlecase  }}

Answer 14

यदि आप कस्टम फ़िल्टर नहीं बनाना चाहते हैं तो आप सीधे उपयोग कर सकते हैं

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

Answer 15

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

Comments

हालांकि यह कोड स्निपेट समाधान हो सकता है, जिसमें स्पष्टीकरण भी शामिल है , जो आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— मयूरपेय

Answer 16

बस इस मुद्दे पर अपने स्वयं के जोड़ने के लिए, मैं स्वयं एक कस्टम निर्देश का उपयोग करूंगा;

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

एक बार घोषित करने के बाद आप अपने एचटीएमएल के अंदर रख सकते हैं;

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

Answer 17

इसके बजाय यदि आप किसी वाक्य के प्रत्येक शब्द को कैपिटलाइज़ करना चाहते हैं तो आप इस कोड का उपयोग कर सकते हैं

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

और अपने स्ट्रिंग इनपुट में केवल "कैपिटलाइज़" फ़िल्टर जोड़ें, उदाहरण के लिए - {{नाम | भुनाने}}

Answer 18

कोणीय 4 या सीएलआई में आप इस तरह एक पीआईपीई बना सकते हैं:

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

Answer 19

कोणीय में 'शीर्षक' होता है जो एक स्ट्रिंग में पहले अक्षर को कैपिटल करता है

पूर्व के लिए:

envName | titlecase

EnvName के रूप में प्रदर्शित किया जाएगा

जब प्रक्षेप के साथ उपयोग किया जाता है, तो सभी रिक्त स्थान जैसे बचें

{{envName|titlecase}}

और envName के मूल्य का पहला अक्षर ऊपरी मामले में मुद्रित किया जाएगा।

Comments

यह उपरोक्त उत्तर के लिए कोई मूल्य प्रदान नहीं करता है

— इवान कालोयानोव

यह एक गलत उत्तर है - यह प्रश्न स्ट्रिंग के पहले अक्षर को कैपिटलाइज़ करने के लिए कहता है, हर शब्द के पहले अक्षर को नहीं।

— एलेक्स पीटर्स

Answer 20

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

Answer 21

आप कैपिटल कार्यक्षमता को समय के रूप में जोड़ सकते हैं:

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

Answer 22

{{ uppercase_expression | capitaliseFirst}} कार्य करना चाहिए

Answer 23

निधिश के जवाब में जोड़,

उन लोगों के लिए जो आप 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>