قسمت دوازدهم AngularJS: جدول در انگولار چگونه تعریف می‌شوند؟

خانه » مقالات اموزشی » javascript » قسمت دوازدهم AngularJS: جدول در انگولار چگونه تعریف می‌شوند؟
قسمت دوازدهم AngularJS : جدول در انگولار چگونه تعریف میشوند ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

1204

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۳-۰۶

Work time-rafiki

زمان مطالعه:

5 دقیقه

پیشنهاد می‌شود قبل از ورود به این جلسه سایر قسمت‌های آموزش انگولار جی اس را نیز مطالعه فرمایید. در این قسمت به بررسی پر کردن خانه‌های جدول توسط انگولار جی اس خواهیم پرداخت. جداول کاربردها و اهمیت‌های بسیاری دارند. در انگولار جی اس به‌سادگی می‌توانید جداول را مدیریت کنید. پس تا انتهای این آموزش با ما همراه باشید.
بهترین عملگر برای جداول استفاده از دستورالعمل ng-reeat می‌باشد.

نمایش داده‌ها در جدول

نمایش داده‌ها در جدول انگولار بسیار ساده است به مثال زیر دراین‌باره توجه فرمایید:

به‌سادگی با دریافت داده‌ها توسط انگولار و قرار دادنان در دستورالعمل ng-repeat برای تکرار جدول شما تولید خواهد شد.

ظاهری متفاوت با css

برای بهتر شدن جداول باید از کدهای css استفاده کنیم، قطعه کد آماده‌ی زیر را در قالب خود برای زیباتر شدن قرار دهید.

با اعمال کدهای فوق یک حاشیه برای شما ایجاد خواهد و خانه‌ها یکی در میان سفید و خاکستری می‌شوند. با اعمال استایل شما ظاهری متفاوت به‌کار خودخواهید داد و نمای بهتری برای کار خود در دست خواهید داشت.

نمایش به‌وسیله‌ی فیلتر orderBy

برای دسته‌بندی داده‌های جدول از فیلتر orderBy استفاده خواهیم کرد به قطعه کد زیر توجه کنید.

نمایش جدول به‌وسیله‌ی فیلتر uppercase

برای نمایش داده‌ها با حروف بزرگ از فیلتر uppercase استفاده می‌کنیم.

نمایش داده‌ها به‌صورت فهرست بندی

برای نمایش داده‌ها به‌صورت فهرست شماره‌دار از فیلتر $index در تگ کمک می‌گیریم.

نمایش داده‌های زوج و فرد

شما با اعمال فیلتر $odd می‌توانید داده‌هایی که در خانه‌های فرد هستند را مدیریت کنید و با فیلتر $even می‌توانید داده‌هایی که در خانه‌های زوج قرار دارند را مدیریت کنید، قطعاً استفاده از داده‌ها به این صورت برای شما مفید خواهد بود. برای درک بهتر این موضوع به قطعه کد زیر توجه کنید.

امیدوارم این آموزش هم برای شما عزیزان مفید واقع‌شده باشد.
برای خواندن مقالات بیشتر دراین‌باره می‌توانید به سایت w3schools مراجعه فرمایید.
یاعلی

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید