ساخت جدول ها (Table)، با دستوردهنده ng-repeat ، در AngularJS
قبلا در کلید شماره 26200 دستوردهنده ng-repeat را معرفی کردیم و گفتیم که به منظور کدنویسی ساده تر برای نمایش اطلاعات یک آرایه (Array) در عنصرهایی از صفحه مثل فهرست (List) یا جدول (Table) به کار می رود.
در واقع، دستوردهنده ng-repeat در AngularJS ، می تواند برای ساخت عنصرهایی (Element) از صفحه که دارای ساختار تکرارشونده هستند، به کار رود (مثلا تگ های tr و td مرتبا در ساختار جدول (Table) تکرار می شوند).
اکنون در این کلید آموزشی، قصد داریم که مثالی را از کاربرد دستوردهنده ng-repeat برای ساخت جدول (Table) در AngularJS ، ذکر نماییم.
به مثال زیر توجه کنید :
فرض کنید که می خواهیم یک جدول (Table) ( کلید شماره 508 ) در صفحه نمایش داده شود که دارای 3 ستون و 4 ردیف می باشد و مقادیر آن را به صورت زیر در نظر می گیریم :
بنابراین می توانیم اطلاعات مورد نظر را در یک آرایه (Array) با نام kelidestan_Users ذخیره کنیم (اطلاعات هر ردیف در یک شیء (Object) قرار می گیرد و بنابراین 4 شیء (Object) به عنوان 4 عنصر در آرایه (Array) خواهیم داشت) :
هر شیء (Object) دارای 3 متغیر می باشد (3 مقدار در 3 متغیر از شیء (Object) ذخیره شده اند).
با توجه به نحوه تعریف آرایه (Array) که در بالا ذکر کردیم، آن را در دستوردهنده ng-init می نویسیم (برای تعریف اولیه آرایه - کلید شماره 26193 ) :
بنابراین کدهای جدول (Table) باید به صورت زیر نوشته شوند :
زوج تگ tr برای ساخت ردیف (Row) و زوج تگ td برای ساخت سلول های (Cell) جدول به کار می روند.
با عبارت های (Expression) ( کلید شماره 26194 ) زیر به متغیرهای هر شیء (Object) اشاره کرده ایم تا در هر ردیف از جدول (Table) نمایش داده شوند :
کد کامل صفحه HTML به صورت زیر خواهد بود :
نتیجه :
