एंगुलरजेएस फिल्टर
डेटा को प्रारूपित करने के लिए एंगुलरजेएस में फिल्टर जोड़े जा सकते हैं।
एंगुलरजेएस फिल्टर
AngularJS डेटा बदलने के लिए फ़िल्टर प्रदान करता है:
currencyकिसी संख्या को मुद्रा प्रारूप में प्रारूपित करें।dateएक निर्दिष्ट प्रारूप के लिए एक तिथि प्रारूपित करें।filterकिसी सरणी से आइटम का एक सबसेट चुनें।jsonकिसी ऑब्जेक्ट को JSON स्ट्रिंग में प्रारूपित करें।limitToएक सरणी/स्ट्रिंग को तत्वों/वर्णों की निर्दिष्ट संख्या में सीमित करता है।lowercaseस्ट्रिंग को लोअर केस में फॉर्मेट करें।numberएक संख्या को एक स्ट्रिंग में प्रारूपित करें।orderByएक अभिव्यक्ति द्वारा एक सरणी का आदेश देता है।uppercaseस्ट्रिंग को अपर केस में फॉर्मेट करें।
भावों में फ़िल्टर जोड़ना
फ़िल्टर को पाइप वर्ण का उपयोग करके, उसके बाद फ़िल्टर द्वारा एक्सप्रेशन में जोड़ा जा सकता है |।
uppercaseफ़िल्टर प्रारूप ऊपरी मामले में स्ट्रिंग करता है :
उदाहरण
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
lowercaseफ़िल्टर प्रारूप स्ट्रिंग्स को लोअर केस में ले जाता है :
उदाहरण
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ 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फ़िल्टर किसी संख्या को मुद्रा के रूप में स्वरूपित करता है :
उदाहरण
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
हमारे AngularJS मुद्रा फ़िल्टर संदर्भ में मुद्रा फ़िल्टर के बारे में और पढ़ें
फ़िल्टर फ़िल्टर
filterफ़िल्टर किसी सरणी के सबसेट का चयन करता है ।
फ़िल्टर का filterउपयोग केवल सरणियों पर किया जा सकता है, और यह एक सरणी देता है जिसमें केवल मिलान करने वाले आइटम होते हैं।
उदाहरण
उन नामों को वापस करें जिनमें "i" अक्षर है:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
हमारे AngularJS फ़िल्टर फ़िल्टर संदर्भ में फ़िल्टर फ़िल्टर के बारे में और पढ़ें
उपयोगकर्ता इनपुट के आधार पर एक सरणी फ़िल्टर करें
इनपुट फ़ील्ड पर निर्देश सेट करके 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फ़िल्टर हर दूसरे वर्ण को अपरकेस में प्रारूपित करेगा ।