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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برچسب ها : اموزش انگولار جی اس، جدول در انگولار

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