AngularJS ফিল্টার

AngularJS-এ ডাটা ফরম্যাট করার জন্য ফিল্টার যোগ করা যেতে পারে。

AngularJS ফিল্টার

AngularJS ডাটা ট্রান্সফরম করার জন্য ফিল্টার প্রদান করে:

• currency নম্বরকে মুদ্রা ফরম্যাটে ফরম্যাট করা
• date একটি তারিখকে নির্দিষ্ট ফরম্যাটে ফরম্যাট করা
• filter একটি অ্যারে থেকে একটি সাবসেট চিহ্নিত করা
• json একটি অবজেক্টকে JSON স্ট্রিং ফরম্যাট করা
• limitTo একটি অ্যারে/স্ট্রিংকে নির্দিষ্ট সংখ্যক ইলেকমেন্ট/অক্ষর সীমাবদ্ধ করা
• lowercase স্ট্রিংকে ছোট করে ফরম্যাট করা
• number নম্বরকে স্ট্রিং ফরম্যাট করা
• orderBy একটি এক্সপ্রেশন দিয়ে আইন্দ্রণ করা
• uppercase স্ট্রিংকে বড় করে ফরম্যাট করা

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

একটি পাইপ সিংহার (|) দিয়ে একটি ফিল্টার এক্সপ্রেশনে যোগ করা যেতে পারে, পরে একটি ফিল্টার যোগ করা হয়。

uppercase ফিল্টার একটি স্ট্রিংকে বড় করে ফরম্যাট করে:

একটি নমুনা

<div ng-app="myApp" ng-controller="personCtrl">
<p>নাম হল {{ lastName | uppercase }}</p>
</div>

আপনার নিজেই চেষ্টা করুন

lowercase ফিল্টার একটি স্ট্রিংকে ছোট করে ফরম্যাট করে:

একটি নমুনা

<div ng-app="myApp" ng-controller="personCtrl">
<p>নাম হল: {{ lastName | lowercase }}</p>
</div>

আপনার নিজেই চেষ্টা করুন

সূচকে ফিল্টার যোগ করুন

পাইপ চিহ্ন ব্যবহার করে: | পরে ফিল্টার, সূচকে ফিল্টার যোগ করতে পারি, যেমন ng-repeat：

একটি নমুনা

orderBy ফিল্টার আইসিকে ক্রমবিন্যাস করবে:

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

আপনার নিজেই চেষ্টা করুন

currency ফিল্টার

currency ফিল্টার সংখ্যা মূল্য ক্রমাঙ্কিত করবে:

একটি নমুনা

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

আপনার নিজেই চেষ্টা করুন

currency ফিল্টারের বিষয়ে আরও তথ্য জানতে, আমাদের AngularJS currency ফিল্টার রেফারেন্স ম্যানুয়াল দেখুন。

filter ফিল্টার

filter ফিল্টার আইসিকের উপাংশ বাছাই করে。

filter ফিল্টার কেবল আইসিকে ব্যবহার করা যায়, যা ম্যাচ করা হলেই একটি আইসিকে ফিরিয়ে দেবে。

একটি নমুনা

অক্ষর "i"-র নাম ধারণকারী নাম ফিরিয়ে দেবে:

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

আপনার নিজেই চেষ্টা করুন

filter ফিল্টারের বিষয়ে আরও তথ্য জানতে, আমাদের AngularJS filter ফিল্টার রেফারেন্স ম্যানুয়াল দেখুন。

ব্যবহারকারীর ইনপুট অনুযায়ী আইসিকে ফিল্টার করুন

ইনপুট ক্ষেত্রে সেট করে: ng-model সূচক, আমরা ইনপুট ক্ষেত্রের মানকে ফিল্টার হিসাবে ব্যবহার করতে পারি。

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

• জানি
• কার্ল
• মার্গারেথ
• হেগ
• জো
• গুস্টভ
• বারগিট
• মেরি
• কাই

একটি নমুনা

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

আপনার নিজেই চেষ্টা করুন

ব্যবহারকারীর ইনপুট অনুযায়ী আইসিকে ক্রমবিন্যাস করুন

সামগ্রীর শীর্ষে ক্লিক করলে ক্রমবিন্যাস পরিবর্তন হবে:

সামগ্রীর শীর্ষে যোগ করে: ng-click সূচক, আমরা একটি ফাংশন চালাতে পারি যা একটি আইসিকের ক্রমবিন্যাস পরিবর্তন করবে:

একটি নমুনা

<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>
<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" নামের পার্সোনাল ফিল্টার তৈরি করুন:

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>
<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 ফিল্টার প্রত্যেক বর্ধক অক্ষরকে বড় করে ফরম্যাট করে