অ্যাঙ্গুলার জেএস ফিল্টার- AngularJs Filter

ডাটা ফরম্যাটের জন্য AngularJS এ ফিল্টার(Filter) যোগ করা যেতে পারে।

অ্যাঙ্গুলার জেএস ফিল্টার- AngularJs Filter

ডাটাকে রূপান্তরের জন্য AngularJS ফিল্টার(filter) সরবরাহ করে। নিম্নে বিভিন্ন ধরনের ফিল্টার এবং এদের কাজ তুলে ধরা হলোঃ

currency: সংখ্যাকে মুদ্রায় রূপান্তর করে।
date: তারিখকে নির্দিষ্ট বিন্যাসে রূপান্তর করে
filter: অ্যারের সাবসেটকে নির্বাচন করে।
json: অবজেক্টকে(object) JSON স্ট্রিং(string) এ রূপান্তর করে।
uppercase: স্ট্রিংকে(string) বড় হাতের বর্ণে রূপান্তর করে।
lowercase: স্ট্রিংকে(string) ছোট হাতের বর্ণে রূপান্তর করে।
number: সংখ্যাকে স্ট্রিং(string) এ রূপান্তর করে।
orderBy: এক্সপ্রেশনের(expression) মাধ্যমে অ্যারেকে ক্রমানুসারে সাজায়।
limitTo: অ্যারে এবং স্ট্রিংকে যথাক্রমে নির্দিষ্ট সংখ্যক এলিমেন্ট এবং ক্যারেক্টার(character) দ্বারা সীমাবদ্ধ করে দেওয়া যায়।

এক্সপ্রেশনে ফিল্টার যোগ করা

এক্সপ্রেশনে(expression) ফিল্টার(Filter) যোগ করতে হলে প্রথমে পাইপ ক্যারেক্টার(|) এবং এর পরেই ফিল্টার ফরম্যাট লিখতে হয়।

uppercase ফিল্টার স্ট্রিংকে বড় হাতের বর্ণে রূপান্তর করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
   <div ng-app="myApp" ng-controller="myCtrl">

<p>বয়সঃ {{ fName | uppercase }}</p>

 </div>

<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.fName = "Tamim",
    $scope.age = "25"
});
</script>

</body>
</html>

ফলাফল

lowercase ফিল্টার স্ট্রিংকে ছোট হাতের বর্ণে রূপান্তর করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
   <div ng-app="myApp" ng-controller="myCtrl">

<p>বয়সঃ {{ fName | lowercase }}</p>

 </div>

<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.fName = "Tamim",
    $scope.age = "25"
});
</script>
</body>
</html>

ফলাফল

ডিরেক্টিভে ফিল্টার যোগ করা

এক্সপ্রেশনের(expression) মতই ডিরেক্টিভ যেমন- ng-repeat এ ফিল্টার(Filter) যোগ করতে হলে প্রথমে পাইপ ক্যারেক্টার(|) এবং এর পরেই ফিল্টার ফরম্যাট লিখতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="playerCtrl">

        <p>অবজেক্ট দ্বারা লুপঃ</p>
        <ul>
          <li ng-repeat="a in player | orderBy:'country'">
            {{ a.name + ', ' + a.country }}
          </li>
        </ul>

    </div>

<script>
    angular.module('myApp', []).controller('playerCtrl', function($scope) {
        $scope.player = [
            {name:'Tamim Iqbal',country:'Bangladesh'},
            {name:'Steve Smith',country:'Australia'},
            {name:'Joe Root',country:'England'},
            {name:'Musfiqur Rahim',country:'Bangladesh'},
            {name:'Sachin Tendulkar',country:'Idia'},
            {name:'Mustafizur Rahman',country:'Bangladesh'},
            {name:'Chris Gayle',country:'West Indies'}
            ];
    });
</script>
</body>
</html>

ফলাফল

currency ফিল্টার

currency ফিল্টার(filter) সংখ্যাকে মুদ্রাতে রূপান্তর করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="costCtrl">
       <h1>Price: {{ price | currency }}</h1>
    </div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
    $scope.price = 65;
});
</script>
</body>
</html>

ফলাফল

ফিল্টার(filter)

filter অ্যারের সাবসেটকে সিলেক্ট করে।

filter শুধুমাত্র অ্যারেতে ব্যবহৃত হয় এবং ম্যাচিং(matching) আইটেমসমূহকে ফেরত পাঠায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
         <ul>
             <li ng-repeat="a in names | filter : 'i'">
                {{ a }}
            </li>
        </ul>
    </div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Tamim',
        'Tahmid',
        'Habib',
        'Rafi',
        'Hasan',
        'Mahi',
        'Sobuj',
    ];
});
</script>
</body>
</html>

ফলাফল

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

ng-model ডিরেক্টিভকে(directive) ইনপুট ফিল্ডে সেট করে ফিল্টারের মধ্যে ইনপুট ফিল্ডের ভ্যালুকে এক্সপ্রেশন(expression) হিসাবে ব্যবহার করে আমরা অ্যারেকে ফিল্টার করতে পারি।

ইনপুট ফিল্ডের মধ্যে অক্ষর টাইপ করুন। আপনার লেখা ম্যাচিং এর উপর ভিত্তি করে লিস্টের নাম কমতে/বাড়তে পারে।

{{ a }}

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
     <div ng-app="myApp" ng-controller="namesCtrl">
        <p>ইনপুট ফিল্ডে একটি অক্ষর টাইপ করুনঃ</p>

        <p><input type="text" ng-model="test"></p>

        <ul>
          <li ng-repeat="x in names | filter:test">
            {{ x }}
          </li>
        </ul>

    </div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Tamim',
        'Tahmid',
        'Habib',
        'Rafi',
        'Hasan',
        'Mahi',
        'Sobuj'
    ];
});
</script>
</body>
</html>

ফলাফল

ইউজার ইনপুটের উপর ভিত্তি করে অ্যারেকে সর্ট(sort) করা

সর্টিং(sorting) অর্ডার পরিবর্তনের জন্য টেবিলের হেডারে(header) ক্লিক করুনঃ

Name	Country
{{a.name}}	{{a.country}}

টেবিলের হেডারে ng-click ডিরেক্টিভ যোগ করে আমরা একটি ফাংশনকে রান(run) করাতে পারি যা অ্যারের সর্টিং অর্ডার পরিবর্তন করতে পারেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<p>টেবিল হেডারে ক্লিক করে সর্টিং অর্ডার পরিবর্তন করুনঃ</p>

<div ng-app="myApp" ng-controller="playerCtrl">

<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="a in player | orderBy:myOrderBy">
<td>{{a.name}}</td>
<td>{{a.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('playerCtrl', function($scope) {
    $scope.player = [
        {name:'Tamim Iqbal',country:'Bangladesh'},
        {name:'Steve Smith',country:'Australia'},
        {name:'Joe Root',country:'England'},
        {name:'Musfiqur Rahim',country:'Bangladesh'},
        {name:'Sachin Tendulkar',country:'Idia'},
        {name:'Mustafizur Rahman',country:'Bangladesh'},
        {name:'Chris Gayle',country:'West Indies'}
        ];
    $scope.orderByMe = function(a) {
        $scope.myOrderBy = a;
    }
});
</script>
</body>
</html>

ফলাফল

কাস্টম(Custom) ফিল্টার

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
     <ul ng-app="myApp" ng-controller="namesCtrl">
        <li ng-repeat="a in names">
            {{a | myFormat}}
        </li>
     </ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(a) {
        var i, u, txt = "";
        for (i = 0; i < a.length; i++) {
            c = a[i];
            if (i % 2 == 0) {
                u = u.toUpperCase();
            }
            txt += u;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        'Tamim',
        'Tahmid',
        'Habib',
        'Rafi',
        'Hasan',
        'Mahi',
        'Sobuj'
        ];
});
</script>
            
</body>
</html>

ফলাফল

myFormat ফিল্টার(filter) সকল জোড় ক্যারেক্টারকে(character) বড় হাতের বর্ণে(uppercase) রূপান্তরিত করে।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

AngularJs টিউটোরিয়াল

অ্যাঙ্গুলার জেএস ফিল্টার- AngularJs Filter