AngularJs এ স্ট্রিংয়ের প্রথম অক্ষরকে মূলধন করুন


134

আমি আঙ্গুলের মধ্যে স্ট্রিংয়ের প্রথম অক্ষরকে মূলধন করতে চাই

যেহেতু আমি {{ uppercase_expression | uppercase}}এটি ব্যবহার করেছি পুরো স্ট্রিংটিকে আপার ক্ষেত্রে রূপান্তর করে।


1
হ্যাঁ, আপনাকে কিছু কোড লিখতে হবে। কৌণিক আপনার জন্য সবকিছু করবে না । বিকাশকারী.মোজিলা.আর.ইন-
ইউএস / ডকস / ওয়েব / জাভা স্ক্রিপ্ট / রেফারেন্স/…

11
এটি CSS ব্যবহার করেও করা যেতে পারে .. পাঠ্য-রূপান্তরটি দেখুন: সম্পত্তিকে মূলধন করুন
রমনাথন মুথুরামান

1
আপনি যদি সত্যই কৌণিক ব্যবহার করতে চান তবে আপনি এই সমাধানটি ব্যবহার করতে পারেন: কোডেপেন.ওই
স্পেন

1
একটি সাধারণ নির্দেশ / ফিল্টার তৈরি করুন যা আপনার জন্য প্রথম মূল বর্ণের অক্ষর তৈরি করবে ...
পঙ্কজ পার্কার

উত্তর:


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
এখানে কাস্টম ক্যাপিটালাইজেশন ফিল্টার কোডেপেন.আইও
মিশাল

148

আমি বলব কৌনিক / জেএস ব্যবহার করবেন না কারণ আপনি কেবল পরিবর্তে সিএসএস ব্যবহার করতে পারেন:

আপনার সিএসএসে, ক্লাস যুক্ত করুন:

.capitalize {
   text-transform: capitalize;
}

তারপরে, আপনার এইচটিএমএল-তে কেবল এক্সপ্রেশনটি (প্রাক্তন হিসাবে) মোড়ানো:

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

কোনও জেএস প্রয়োজন নেই;)


7
এই রূপান্তরটি প্রতিটি শব্দের প্রথম
অক্ষরকে মূলধন করে তুলবে

22
@ জাকুব। উদাহরণস্বরূপ, যদি আপনি কেবল প্রথম শব্দটি (ভাল, চিঠি) মূলধন করতে চান, তবে সিএসএস নির্বাচককে :first-letterসিউডো-এলিমেন্ট সিলেক্টারের মাধ্যমে কেবল ব্যাখ্যা করুন । আর কিছু খোলা আছে? :)
ফিলজেন

2
@ ফিলজেন হ্যাঁ! আপনি কেবল এইচটিএমএল দিয়ে কীভাবে এটি করবেন? ;-)
রোমান ভিনসেন্ট

@ রোমানইনসেন্ট "কেবলমাত্র এইচটিএমএল" বলতে আপনার অর্থ কী? হয়তো নীচের আমার উত্তরটি সাহায্য করে (এটি কার্যকর অবস্থায় দেখতে "কোড স্নিপেট চালান" ক্লিক করুন)। এইচটিএমএল বিষয়বস্তু স্থিতিশীল, যথাক্রমে ডিওএম বিষয়বস্তু পরিবর্তনের জন্য আপনাকে কমপক্ষে কিছু সিএসএস বা জেএসে ফেলতে হবে।
ফিলজেন

4
আমি দুঃখিত, এটি একটি রসিকতা করার জন্য একটি খারাপ চেষ্টা ছিল।
রোমেন ভিনসেন্ট

57

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে আপনি কেবল text-capitalizeসহায়ক ক্লাস যুক্ত করতে পারেন :

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

সম্পাদনা: লিঙ্কটি আবার মারা গেলে:

পাঠ্য রূপান্তর

পাঠ্য মূলধন শ্রেণীর সাহায্যে উপাদানগুলিতে পাঠ্য রূপান্তর করুন।

নিম্নতর পাঠ্য
উচ্চ শিক্ষিত পাঠ্য।
ক্যাপটিলিজেড পাঠ্য

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

টেক্সট-মূলধন কীভাবে কেবলমাত্র প্রতিটি শব্দের প্রথম অক্ষর পরিবর্তন করে তা অন্য কোনও অক্ষরের ক্ষেত্রে প্রভাবিত না করে রেখে দেখুন Note


লক্ষ্য অর্জনের দ্রুত এবং সহজ উপায়, এটি স্ট্রিংয়ের প্রতিটি শব্দের প্রথম অক্ষরকে বড় করে তোলে যা দুর্দান্ত is
কিসানমে

পর্দার পিছনে এটি স্রেফ ব্যবহার করা হচ্ছেtext-transform: capitalize;
ক্যামিক ck

27

আপনি যদি কৌনিক 4+ ব্যবহার করেন তবে আপনি কেবল ব্যবহার করতে পারেন titlecase

{{toUppercase | titlecase}}

কোনও পাইপ লিখতে হবে না।


4
এটি একটি ভুল উত্তর — প্রশ্নটি প্রতিটি শব্দের প্রথম বর্ণ নয়, স্ট্রিংয়ের প্রথম অক্ষরকে মূলধন করতে বলে।
অ্যালেক্স পিটারস


18

আপনি যদি পারফরম্যান্সের পরে থাকেন তবে অ্যাংুলারজেএস ফিল্টারগুলি এড়াতে চেষ্টা করুন কারণ তাদের স্থায়িত্ব পরীক্ষা করার জন্য প্রতি অভিব্যক্তি প্রতি দুবার প্রয়োগ করা হয়।

আরও ভাল উপায় ::first-letterহ'ল সিএসএস সিউডো-এলিমেন্টটি ব্যবহার করা text-transform: uppercase;spanযদিও ইনলাইন উপাদানগুলিতে যেমন ব্যবহার করা যায় না , তবে পরবর্তী সর্বোত্তম জিনিসটি text-transform: capitalize;পুরো ব্লকে ব্যবহার করা হবে যা প্রতিটি শব্দকে মূলধন করে capital

উদাহরণ:

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

আমি @ ট্রাম্পগুইয়ের উত্তরটি পছন্দ করি

সিএসএস সর্বদা (ভাল, সবসময় নয়) একটি ভাল পছন্দ, তাই: text-transform: capitalize;অবশ্যই যাওয়ার উপায়।

তবে যদি আপনার সামগ্রীতে সমস্ত বড় হাতের অক্ষর শুরু হয়? যদি আপনি text-transform: capitalize;"FOO বার" এর মতো সামগ্রীতে চেষ্টা করেন তবে আপনি আপনার প্রদর্শনীতে "FOO বার" পাবেন get এই সমস্যাটি ঘুরে দেখার জন্য text-transform: capitalize;আপনি আপনার সিএসএসে রাখতে পারেন, তবে আপনার স্ট্রিংকে ছোট করে রাখতে পারেন, তাই:

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

যেখানে আমরা @ ট্রাম্পগুইয়ের মূলধন শ্রেণিটি ব্যবহার করছি:

.capitalize {
  text-transform: capitalize;
}

সুতরাং, ভান করে যে foo.awsome_propertyসাধারণত "FOO বার" মুদ্রণ করা হয়, এটি এখন পছন্দসই "ফু বার" মুদ্রণ করবে।


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

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

}
});

মানচিত্রের ফাংশনটির ক্রেডিট @ নতুন রাজে যায়



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

একবার ঘোষিত হয়ে আপনি নীচের মতো আপনার এইচটিএমএল এর ভিতরে রাখতে পারেন;

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

এবং প্রাক্তন - নাম - এর জন্য কেবল আপনার স্ট্রিং ইনপুটটিতে ফিল্টার "মূলধন" যুক্ত করুন পুঁজিতে}}


0

কৌণিক 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;
  }
}

0

কৌণিকের 'টাইটেলিকেস' রয়েছে যা একটি স্ট্রিংয়ে প্রথম অক্ষরকে বড় করে তোলে

প্রাক্তন হিসাবে:

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>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.