مصفي AngularJS

يمكن إضافة مرشحات إلى AngularJS لتنسيق البيانات.

مصفي AngularJS

يقدم AngularJS مرشحات لتحويل البيانات:

• currency تنسيق الرقم إلى صيغة العملة
• date تنسيق التاريخ إلى صيغة معينة
• مرشح اختيار مجموعة فرعية من المجموعة
• 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 | currency }}</h1>
</div>

جرب بنفسك

للحصول على معلومات أكثر حول مرشح currency، يرجى الرجوع إلى دليل مرشحات AngularJS الخاص بنا.

مرشح filter

مرشح يُختار المرشح مجموعة فرعية من الجماعة.

مرشح يمكن استخدام المرشح فقط للجماعات، ويقوم بتقديم مجموعة تحتوي فقط على التطابقات.

مثال

سيتم استعادة الأسماء التي تحتوي على الحرف "i":

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

جرب بنفسك

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