נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך: פילטרים של AngularJS

מחבר:
בתאריך:

פילטרים (מסננים) של AngularJS משמשים אותנו כדי לסנן מידע וכדי לפרמט מידע (להציג את המידע בצורה הרצויה לנו). הפילטרים מתחלקים לשניים. פילטרים שהפריימוורק מספק לנו, ופילטרים מיוחדים שאנחנו כותבים במידת הצורך.

אתם מוזמנים לראות את דוגמת הקוד שנפתח במדריך בסרטון הבא:

 

את האפליקציה שראיתם בסרטון, נפתח בשישה שלבים:

 

1. נגדיר את האפליקציה והקונטרולר

לאפליקציה נקרא myApp, ונגדיר אותה על התגית הפותחת של ה-html, ואת הקונטרולר carsCtrl נגדיר על הדיב שיעטוף את התצוגה.


<html ng-app="myApp">
<head> 
  <title>AngularJS filters</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
</head>
<body>
  <div ng-controller="carsCtrl">

  </div>
</body>
</html>

 

 

2. נתחיל לכתוב את הסקריפט האנגולרי

בסקריפט האנגולרי, נגדיר בשלב זה שני מרכיבים. המודל והקונטרולר (את שניהם נגדיר לפי קוד ההטמ"ל שכתבנו למעלה). בתוך הקונטרולר נכתוב את המערך cars שמכיל מידע עבור המודלים השונים של המכוניות.


<script>
// Module
var myApp = angular.module('myApp', []);

// Controller
myApp.controller('carsCtrl', function($scope) {
    
  $scope.cars = [
    {model:'BMW',country:'Germany',price:160000,date:'2015-11-11'},
    {model:'Tesala',country:'USA',price:180000,date:'2014-10-08'},
    {model:'Jaguar',country:'GB',price:210000,date:'2016-09-01'},
    {model:'Audi',country:'Germany',price:150000,date:'2016-04-01'},
    {model:'Bentley',country:'USA',price:190000,date:'2014-12-28'},
    {model:'Ferrari',country:'Italy',price:1000000,date:'2016-07-16'}
  ];
});
</script>

 

3. נציג את המידע מהמערך בתוך טבלה שתוצג בחלק ההטמ"ל

נחזור להטמ"ל ונציג את המערך מהסעיף הקודם, בתוך טבלה הטמ"לית. לשם כך, נעבור על פריטי המערך, פריט-פריט באמצעות ng-repeat, ונדפיס את הפריטים בתוך תיבות הטבלה.


<div ng-controller="carsCtrl">
 
<h3>Cars List</h3>
 
<table>
<thead>
  <tr>
    <th>Model</th>
    <th>Price</th>
    <th>Country</th>
    <th>Date</th>
  <tr>
</thead>
<tbody>
  <tr ng-repeat="car in cars">
    <td>{{ car.model }}</td>
    <td>{{ car.price }}</td>
    <td>{{ car.country }}</td>
    <td>{{ car.date }}</td>
  </tr>
</tbody>
</table>
 
</div>

 

4. נפרמט את הערכים שמוצגים בטבלה

נפעיל על פריטי הרשימה מספר פילטרים שישנו את האופן (הפורמט) שבו מוצגים הפריטים:

  • uppercase - הופך את כל האותיות הקטנות לגדולות, רלבנטי באנגלית
  • lowercase - הופך את כל האותיות הגדולות לקטנות, באנגלית
  • limitTo - מגביל את מספר התווים בטקסט לפי הפרמטר שמעבירים לפילטר.
  • currency - מציג מספרים בפורמט של מטבע שכולל את סימן ה-$, הפסיקים שמפרידים בין האלפים, וערכים עשרוניים. ניתן לשנות את המטבע ואת מספר הספרות העשרוניות אם מעבירים פרמטרים נוספים.

<tr ng-repeat="car in cars">
  <td>{{ car.model | uppercase }}</td>
  <td>{{ car.price | currency:'₪':0 }}</td>
  <td>{{ car.country | limitTo:3 | lowercase }}</td>
  <td>{{ car.date }}</td>
</tr>

 

5. נפעיל פילטרים ברמת הרשימה

נפעיל על הרשימה מספר פילטרים במטרה לברור אילו פריטים יוצגו, ומה הסדר שבו יוצגו.

בדוגמה הבאה נבחר להציג את המכוניות שמיוצרות בארה"ב ונסדר את התאריכים בסדר יורד ואת המחירים בסדר עולה:


<tr ng-repeat="car in cars | orderBy: 'date' | orderBy: '-price' | filter: {'car.country': 'USA'}">
  <td>{{ car.model | uppercase }}</td>
  <td>{{ car.price | currency:'₪':0 }}</td>
  <td>{{ car.country | limitTo:3 | lowercase }}</td>
  <td>{{ car.date | ilDateFormat }}</td>
</tr>

הפילטר filter מקבל מחרוזת json שמכילה את הקריטריונים לסינון אבל אם רוצים סינון קצת יותר מתקדם עדיף להשתמש בng-if.

לדוגמה, מעוניינים לקבל מכוניות שעלותם גבוהה מ-150000 ובתנאי שיוצרו בגרמניה או בארה"ב.


<tr ng-repeat="car in cars" 
     ng-if="car.price > 150000 && (car.country == 'USA' || car.country == 'Germany')">
       <td>{{ car.model | uppercase }}</td>
       <td>{{ car.price | currency:'₪':0 }}</td>
       <td>{{ car.country | limitTo:3 | lowercase }}</td>
       <td>{{ car.date | ilDateFormat }}</td>
</tr>

 

6. פילטרים שאנחנו כותבים

 

לא תמיד הפילטרים שמספק Angular מספיקים לנו, ובמקרים אילה נוכל לכתוב את הפילטרים בעצמנו.

לדוגמה, פילטר ששמו ilDateFormat שהופך את פורמט התאריך מאמריקאי לישראלי.

את הפילטר נשייך לאפליקציה שלנו, ונעביר לו פונקציה אנונימית (שבמקרה זה מקבלת את השירות האנגולריfilter$ כפרמטר).


<script>
// Custom filter
myApp.filter('ilDateFormat', function ($filter){
  return function(text){
    var dateTxt = text.replace(/-/g,"/");
    var dateTmp = new Date(dateTxt);
	
    return $filter('date')(dateTmp, "dd/MM/yyyy");
  }
});
</script>

הפונקציה שמחזיר הפילטר, משתמש בביטוי רגולרי כדי להחליף את הקווים המפרידים לקווים חוצצים, ואחר כך הופכת את המחרוזת שמתקבלת בתהליך לאובייקט תאריך, ולבסוף מחזירה את התאריך במבנה הרצוי.

 

הקוד המלא

להלן, הקוד המלא שפתחנו במדריך:


<html ng-app="myApp">
<head> 
  <title>AngularJS filters</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
</head>
<body>
  <div ng-controller="carsCtrl">
 
    <h3>Cars List</h3>
	 
    <table>
    <thead>
      <tr>
        <th>Model</th>
	<th>Price</th>
	<th>Country</th>
	<th>Date</th>
      <tr>
    </thead>
    <tbody>
      <tr ng-repeat="car in cars" ng-if="car.price > 150000 && (car.country == 'USA' || car.country == 'Germany')">
        <td>{{ car.model | uppercase }}</td>
        <td>{{ car.price | currency:'₪':0 }}</td>
        <td>{{ car.country | limitTo:3 | lowercase }}</td>
        <td>{{ car.date | ilDateFormat }}</td>
      </tr>
    </tbody>
    </table>
	 
  </div>
  
<script>
// Module
var myApp = angular.module('myApp', []);

// Filter
myApp.filter('ilDateFormat', function ($filter){
  return function(text){
    var dateTxt = text.replace(/-/g,"/");
    var dateTmp = new Date(dateTxt);
	
    return $filter('date')(dateTmp, "dd/MM/yyyy");
  }
});

// Controller
myApp.controller('carsCtrl', function($scope) {
    
  $scope.cars = [
    {model:'BMW',country:'Germany',price:160000,date:'2015-11-11'},
    {model:'Tesala',country:'USA',price:180000,date:'2014-10-08'},
    {model:'Jaguar',country:'GB',price:210000,date:'2016-09-01'},
    {model:'Audi',country:'Germany',price:150000,date:'2016-04-01'},
    {model:'Bentley',country:'USA',price:190000,date:'2014-12-28'},
    {model:'Ferrari',country:'Italy',price:1000000,date:'2016-07-16'}
  ];
});
</script>
</body>
</html>

 

סיכום

במדריך זה למדנו כיצד להשתמש בפילטרים קיימים של אנגולר כדי לסנן את המידע שאנחנו מוצגים למשתמשים וכדי לשנות את מראה המידע. כמו כן למדנו, כיצד לכתוב פילטרים משלנו, במידה וצריך.

 

לכל מדריכי ה- AngularJS

הוסף תגובה חדשה

 

= 9 + 3

תמונת המגיב

אנגולרית בתאריך: 29.12.2016

תודה על ההסבר,
איך מפלטרים לפי חודש מסוים?
שיציג רק את החודש הנבחר?

תמונת המגיב

אנגולרסקי בתאריך: 18.05.2017

מעולה,תודה רבה!

תמונת המגיב

יוסי בן הרוש בתאריך: 18.05.2017

תודה. מסכים אתך.