مرشحات AngularJS
يمكن إضافة عوامل التصفية في AngularJS لتنسيق البيانات.
مرشحات AngularJS
يوفر 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
المرشح بتنسيق كل حرف آخر إلى أحرف كبيرة.