חזרה על NG-REPEAT

ng-repeat הוא ה- directive היחיד שמאפשר לנו לשכפל אלמנטים ב- DOM בהתאם למבנה נתונים ב- scope. בפוסט הזה אדגים שימושים נפוצים של ה- directive.

שימוש בסיסי

חזרה על array פשוט:

(function () {
  function RepeatController () {   
    this.colors = ['red', 'green', 'blue', 'yellow','pink'];        
  }

  angular.module('repeat.app',[])  
    .controller('RepeatController',RepeatController);
}());

ng-repeat חושף עבורנו properties עבור כל template (כל חזרה) שמאפשרים לנו ״לחקור״ את האלמנט ולדעת האם הוא ראשון, אחרון, זוגי או אי-זוגי ומה האינדקס שלו (בתצוגה)

(function () {
  function RepeatController () {   
    this.colors = ['red','green','blue','yellow','pink'];        
  }

  angular.module('repeat.app',[])  
    .controller('RepeatController',RepeatController);
}());

ng-repaet מאפשר לנו לסמן נקודת התחלה וסוף על מנת שנוכל לבצע חזרה על בלוק של אלמנטים שונים, כמו בדוגמה הזו:

(function () {

  function RepeatController () {   
    this.students = [
      { id: '6557443', name: 'Nir', address: 'Holon, israel'},
      { id: '4553452', name: 'Joe', address: 'Tel-aviv'},
      { id: '2988374', name: 'Foo', address: 'Haifa, israel'},
      { id: '7244359', name: 'Bar', address: 'Beer-sheva'},          
      ];        
  }

  angular.module('repeat.app',[])  
    .controller('RepeatController',RepeatController);
}());


חדש בגירסה 1.3.17

כאשר משתמשים בפילטר ניתן לקבל את תוצאות הפילטור ל scope. זה מאפשר לנו לדוגמה להציג הודעה למשתמש בהתאם לתוצאת הפילטר. בדוגמה הבאה, אני מציג הודעה רק במידה ואין תוצאות רלוונטיות (מומלץ לפתוח את הדוגמה על ידי לחיצה על jsbin למעלה משמאל):

JS Bin

ng-repeat מאפשר לנו לשכפל אלמנטים ב- DOM בהתאם למבנה נתונים. בפוסט הזה הדגמתי כמה מהשימושים הפופלרים של ng-repeat, מומלץ להכיר גם את השאר: https://docs.angularjs.org/api/ng/directive/ngRepeat