معرفی ng-repeat به عنوان یک دستور دهنده (Directive) برای کدنویسی ساده تر به منظور نمایش اطلاعات یک آرایه (Array) در عنصرهایی از صفحه مثل فهرست (List) یا جدول (Table)، در AngularJS

حتما تاکنون برای شما پیش آمده است که مجبور باشید با استفاده از تگ های (Tag) مربوط به ساخت عنصرهایی مثل فهرست (List) ( کلید شماره 510 ) یا جدول (Table) ( کلید شماره 508 )، حجم زیادی از ترکیب اطلاعات و تگ ها (Tag) را در کد HTML صفحه قرار دهید. اما چارچوب AngularJS ، راه حلی را ارائه می دهد که با استفاده از آن، دیگر نیازی به تکرار تگ ها (Tag) و کدنویسی های اضافه، نداریم و تنها با تعریف اطلاعات اصلی در یک آرایه (Array) و سپس مقدار مختصری کدنویسی در عنصر مورد نظر از صفحه (در فهرست یا جدول)، می توانیم همان خروجی را در صفحه مورد نظر از وب سایت خود داشته باشیم.

برای این منظور، باید قبل از هر چیز، اطلاعات مورد نظرمان را در یک آرایه (Array) تعریف کنیم. برای تعریف این آرایه (Array)، می توانیم از ng-init استفاده نماییم ( کلید شماره 26193 ).

به عنوان مثال، فرض کنیم که قصد داریم اعداد زیر را در یک فهرست (List) در صفحه نمایش بدهیم :

در حالت عادی، باید کدنویسی این بخش از صفحه را به صورت زیر انجام می دادیم :

همین کد در یک مثال کامل، به صورت زیر خواهد بود :

نتیجه :

خوب اکنون برای ایجاد معادل همان کد با AngularJS ، ابتدا باید اعداد مورد نظر را در یک آرایه (Array) تعریف کنیم :

نام آرایه را برابر kelidestanNumbers انتخاب کرده ایم. حال برای اینکه مشابه همان کد نمایش فهرست (List) را داشته باشیم (نمایش فهرست به همان صورت که می خواهیم)، کد زیر را در صفحه می نویسیم :

ابتدا به مقدار تعیین شده برای ng-repeat دقت کنید :

کد بالا به ng-repeat می گوید که آرایه kelidestanNumbers را خوانده و هر عنصر درون آرایه kelidestanNumbers را به صورت متغیری با نام number در نظر بگیرد. بنابراین، شروع به خواندن تک تک عنصرهای آرایه kelidestanNumbers می کند (به ترتیب آنها در آرایه) و هر عنصر را که از آرایه می خواند، آن را متغیری با نام number در نظر می گیرد.

چون ng-repeat برای تگ شروع li ذکر شده است، بنابراین زوج تگ li به تعداد عناصر موجود در آرایه kelidestanNumbers ، در خروجی صفحه، تکرار می شود (اثر تکرار آن در خروجی صفحه را خواهیم داشت).

اما در تکرارهای زوج تگ li ، چون عبارت (Expression) ( کلید شماره 26194 ) زیر در بین زوج تگ li وجود دارد، بنابراین هر بار باید این عبارت (Expression) ارزیابی شده و مقدار معادل آن در بین زوج تگ li نوشته شود :

در عبارت (Expression) بالا، تنها نام متغیر number ذکر شده است، بنابراین مقداری که در بین زوج تگ li قرار می گیرد، هر بار برابر یکی از عنصرهای فراخوانی شده از آرایه kelidestanNumbers می باشد (چون هر بار، هر عنصر از آرایه kelidestanNumbers را برابر متغیر number در نظر می گیرد).

همین کدها را در یک مثال کامل ذکر می کنیم :

نتیجه :

ما این مثال را با اطلاعات کمی ذکر کردیم، در مواردی که حجم اطلاعات برای نمایش در فهرست (List) یا جدول (Table)، زیاد باشد، متوجه خواهید شد که استفاده از ng-repeat ، تا چه حد به کدنویسی کمتر و خلاصه تر، کمک می کند.

اکنون یک مثال پیچیده تر را ذکر می کنیم :