תחי ישראל -אין לנו ארץ אחרת

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

מחבר:

בתאריך: 16.07.2016

פילטרים (מסננים) של 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

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

נכתב ע"י יוסי בן הרוש

מתכנת אתרי אינטרנט, מומחה Laravel ו-Angular, והכותב של כל התכנים ב רשתטק תכנות אתרי אינטרנט

לכל המדריכים >>

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.