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

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت دوازدهم AngularJS : جدول در انگولار چگونه تعریف میشوند ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

1204

Calendar-amico (2)

تاریخ انتشار:

28 , اسفند , 1397

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مرتضی افضلی

مرتضی افضلی

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

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

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

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.