AngularJS Filters

AngularJS নির্মাতারা ডেটা ফর্ম্যাট করতে

AngularJS বিল্ডার্স

বিল্ডারদের ডেটা ফর্ম্যাট করতে AngularJS এ যোগ করা যেতে পারে।

AngularJS বিল্ডারদের ডেটা রূপান্তর করার জন্য প্রদান করে:

নির্মাতা ব্যাখ্যা আবেদন
currency মুদ্রা বিন্যাসে একটি সংখ্যা বিন্যাস {{ price | currency }}
date একটি নির্দিষ্ট বিন্যাসে একটি তারিখ ফরম্যাট করে {{ today | date:'yyyy-MM-dd' }}
filter একটি অ্যারে থেকে আইটেমের একটি উপসেট নির্বাচন করে items | filter:'search'
json JSON স্ট্রিং হিসাবে একটি অবজেক্ট ফরম্যাট করে {{ obj | json }}
limitTo অ্যারে/স্ট্রিংকে একটি নির্দিষ্ট সংখ্যক উপাদান/অক্ষরের মধ্যে সীমাবদ্ধ করে {{ text | limitTo:10 }}
lowercase ছোট হাতের অক্ষরে স্ট্রিং ফর্ম্যাট করে {{ name | lowercase }}
number একটি সংখ্যাকে স্ট্রিং হিসাবে ফর্ম্যাট করে {{ count | number }}
orderBy একটি অভিব্যক্তি দ্বারা একটি অ্যারে সাজান items | orderBy:'name'
uppercase স্ট্রিংকে বড় হাতের অক্ষরে ফর্ম্যাট করে {{ name | uppercase }}

অভিব্যক্তিতে নির্মাতা যোগ করা হচ্ছে

পাইপ চরিত্র | বিল্ডার ব্যবহার করে এক্সপ্রেশনে যোগ করা যেতে পারে, তার পরে একজন নির্মাতা।

বড় হাতের নির্মাতা

<div ng-app="myApp" ng-controller="personCtrl">
    <p>The name is {{ lastName | uppercase }}</p>
</div>

ছোট হাতের বিল্ডার

<div ng-app="myApp" ng-controller="personCtrl">
    <p>The name is {{ lastName | lowercase }}</p>
</div>

নির্দেশিকায় নির্মাতাদের যুক্ত করা হচ্ছে

পাইপ চরিত্র | ব্যবহার করে, একজন নির্মাতা অনুসরণ করে, নির্মাতাদের ng-repeat-এর মতো নির্দেশাবলীতে যুক্ত করা হয়:

উদাহরণ

অর্ডারবিল্ডার একটি অ্যারে সাজান:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names | orderBy:'country'">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>
</div>

মুদ্রা নির্মাতা

মুদ্রা নির্মাতা মুদ্রা হিসাবে একটি সংখ্যা তৈরি করে:

উদাহরণ

<div ng-app="myApp" ng-controller="costCtrl">
    <h1>Price: {{ price | currency }}</h1>
</div>

মুদ্রা নির্মাতা বিকল্প:

মুদ্রা নির্মাতার জন্য অতিরিক্ত বিকল্পগুলি নির্দিষ্ট করা যেতে পারে: {{ মূল্য | মুদ্রা:"₹":0 }} - এটি দশমিক ছাড়াই ₹ চিহ্ন সহ ভারতীয় রুপি হিসাবে প্রদর্শিত হবে।

ফিল্টার নির্মাতা

ফিল্টার নির্মাতা একটি অ্যারের একটি উপসেট নির্বাচন করে।

ফিল্টার বিল্ডার শুধুমাত্র অ্যারেতে ব্যবহার করা যেতে পারে এবং শুধুমাত্র মিলে যাওয়া আইটেম ধারণকারী একটি অ্যারে ফিরিয়ে দেবে।

উদাহরণ

"i" অক্ষর ধারণকারী নামগুলি ফেরত দিন:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names | filter : 'i'">
            {{ x }}
        </li>
    </ul>
</div>

ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে অ্যারে ফিল্টার করা

একটি ইনপুট ক্ষেত্রে এনজি-মডেল নির্দেশিকা সেট করে, ইনপুট ক্ষেত্রের মান নির্মাতার একটি অভিব্যক্তি হিসাবে ব্যবহার করা যেতে পারে।

ইনপুট ক্ষেত্রে একটি অক্ষর টাইপ করুন এবং মিলের উপর নির্ভর করে তালিকাটি সঙ্কুচিত/প্রসারিত হবে:

<div ng-app="myApp" ng-controller="namesCtrl">
    <p><input type="text" ng-model="test"></p>
    <ul>
        <li ng-repeat="x in names | filter : test">
            {{ x }}
        </li>
    </ul>
</div>

রিয়েল টাইম অনুসন্ধান:

ফিল্টার নির্মাতা এনজি-মডেলের সাথে একত্রে রিয়েল-টাইম অনুসন্ধান কার্যকারিতা প্রদান করে। তালিকা স্বয়ংক্রিয়ভাবে ব্যবহারকারীর ধরন হিসাবে আপডেট করা হয়.

ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে একটি অ্যারে সাজানো

সাজানোর ক্রম পরিবর্তন করতে টেবিল শিরোনামে ক্লিক করুন:

HTML:

<div ng-app="myApp" ng-controller="namesCtrl">
    <table border="1" width="100%">
        <tr>
            <th ng-click="orderByMe('name')">Name</th>
            <th ng-click="orderByMe('country')">Country</th>
        </tr>
        <tr ng-repeat="x in names | orderBy:myOrderBy">
            <td>{{x.name}}</td>
            <td>{{x.country}}</td>
        </tr>
    </table>
</div>

JavaScript:

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
    ];
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>

কাস্টম নির্মাতারা

আপনি আপনার মডিউলের সাথে একটি নতুন বিল্ডার ফ্যাক্টরি ফাংশন নিবন্ধন করে আপনার নিজস্ব নির্মাতা তৈরি করতে পারেন:

উদাহরণ

"myFormat" নামে একটি কাস্টম নির্মাতা তৈরি করুন:

HTML:

<ul ng-app="myApp" ng-controller="namesCtrl">
    <li ng-repeat="x in names">
        {{x | myFormat}}
    </li>
</ul>

JavaScript:

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

myFormat নির্মাতা প্রতিটি দ্বিতীয় অক্ষরকে বড় হাতের আকারে ফর্ম্যাট করবে।

ব্যায়ামের মাধ্যমে শেখা

আপনি কিভাবে অভিব্যক্তি নির্মাতাদের যোগ করবেন?

পাইপ প্রতীক ব্যবহার করে (|)
✓ ঠিক আছে! পাইপ প্রতীক ব্যবহার করে নির্মাতা যোগ করা হয়
কমা ব্যবহার করে (,)
✗ ভুল! বিল্ডার কমা দ্বারা পৃথক করা হয় না
প্লাস চিহ্ন ব্যবহার করে (+)
✗ ভুল! বিল্ডার একটি প্লাস চিহ্ন সঙ্গে যোগ করা হয় না
বিয়োগ চিহ্ন ব্যবহার করে (-)
✗ ভুল! বিল্ডার একটি বিয়োগ চিহ্ন সঙ্গে যোগ করা হয় না

অনেক নির্মাতা

আপনি একের পর এক একাধিক নির্মাতা ব্যবহার করতে পারেন:

উদাহরণ

<div ng-app="myApp" ng-controller="personCtrl">
    <p>Name: {{ name | uppercase | limitTo:5 }}</p>
    <p>Price: {{ price | currency:"₹":0 | lowercase }}</p>
    <p>Date: {{ today | date:'fullDate' | uppercase }}</p>
</div>

বিল্ডার অর্ডার গুরুত্বপূর্ণ:

বিল্ডারদের বাম থেকে ডানে মৃত্যুদন্ড কার্যকর করা হয়। বিল্ডারদের অর্ডার উল্লেখযোগ্যভাবে আউটপুট প্রভাবিত করতে পারে। সর্বদা সঠিক ক্রমে বিল্ডার ব্যবহার করুন।

নির্মাতা পরামিতি

অনেক নির্মাতা অতিরিক্ত পরামিতি গ্রহণ করেন:

নির্মাতা পরামিতি উদাহরণ
date তারিখ বিন্যাস {{ today | date:'yyyy-MM-dd' }}
currency মুদ্রা কোড, দশমিক সংখ্যা {{ price | currency:"₹":2 }}
limitTo সীমা নং {{ text | limitTo:20 }}
number দশমিক সংখ্যা {{ value | number:2 }}