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

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

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

ساخت لیست انتخابی به وسیله ng-options

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

مقایسه ی ng-options و ng-repeat

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

شما به سادگی با دستورالعمل ng-repeat به دلیل تکرار بلاک های کد html در هر خانه از ارایه میتوانید خانه هایی در لیست کشویی ایجاد کنید ، اما دستورالعمل ng-options فقط برای پرکردن خانه های لیست کشویی طراحی شده است و در انتها یک خصوصیت بسیار ویژه تر نسبت به دستورالعمل ng-repeat دارد :

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

چه استفاده کنیم ؟

هنگامی که شما یک رشته از شی ها مانند لیست زیر دارید :

دستورالعمل ng-repeat دارای محدودیت انتخاب یک رشته به عنوان مقدار می باشد :

درحال که دستورالعمل ng-option محدودیتی برای انتخاب ندارد و تمامی شی ها را می پذیرد.

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

منبع داده به عنوان یک شی

در مثال های قبل ما از ارایه ها به عنوان منبع داده استفاده میکردیم اما میتوان از شی ها نیز به عنوان منبع داده استفاده کرد.
فرض کنید شما نیز یک شی با ارزش کلیدی و مشترک دارید:

استفاده از اصلاحات در دستورالعمل ng-options مقداری برای شی ها متفاوت است:

در استفاده از شی ها به عنوان منبع داده ، x مقدار کلیدی و y مقدار ارزشی را تکرار خواهد کرد. برای درک بهتر این موضوع به مثال زیر توجه کنید :

مقدار انتخاب شده همیشه به عنوان value در key-value شناخته میشود .
Value در key-value نیز میتواند یک شی باشد.
مقدار انتخاب شده همیشه به عنوان value در key-value شناخته میشود ، با این تفاوت که این بار از شی استفاده کردیم :

خانه های لیست کشویی نباید از جنس key در key-value باشند ، فقط میتوانند value یا خاصیتی از شی value باشند
برای درک بهتر این موضوع به مثال زیر توجه کنید :

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

برچسب ها : اموزش کامل انگولار جی اس، طراحی وب اپلیکیشن

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