انگولار جی اس به شما این اجازه را می‌دهد تا به‌سادگی دران به‌وسیله‌ی آرایه‌ها و یا شیءها لیست کشویی تولید کنید.
پیشنهاد میشود قبل از ورود به این اموزش سایر قسمت های اموزشی دوره ی انگولار جی اس را مطالعه فرمایید.
ساخت لیست انتخابی به‌وسیله ng-options
اگر شما قصد داشته باشید لیست کشویی بر پایه آرایه‌ها و یا شیءها در انگولار تولید کنید باید از دستورالعمل ng-options استفاده کنید. شما می‌توانید برای درک بهتر استفاده از دستورالعمل‌ها بر روی دستورالعمل انگولار کلیک کنید تا وارد آموزش مربوطه شوید.
به مثال زیر درباره‌ی ساخت لیست انتخابی توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Morteza", "Sajjad", "Mohammad"]; }); </script> <p>این مثال نمونه کامل پر شدن خانه های لیست کشویی به وسیله ی دستورالعمل ng-optios می باشد.</p> |
مقایسه‌ی ng-options و ng-repeat
شما به‌سادگی می‌توانید با استفاده از دستورالعمل ng-repeat نیز لیست کشویی مانند قبل ایجاد کنید.
|
1 2 3 |
<select> <option ng-repeat="x in names">{{x}}</option> </select> |
شما به‌سادگی با دستورالعمل ng-repeat به دلیل تکرار بلاک‌های کد html در هر خانه از ارائه می‌توانید خانه‌هایی در لیست کشویی ایجاد کنید، اما دستورالعمل ng-options فقط برای پر کردن خانه‌های لیست کشویی طراحی‌شده است و در انتها یک خصوصیت بسیار ویژه‌تر نسبت به دستورالعمل ng-repeat دارد:
لیست‌های کشویی که به‌وسیله‌ی ng-options ساخته میشوند اجازه انتخاب مقداری از شیءها به شما می‌دهد درصورتی‌که در ng-repeat شما فقط اجازه انتخاب یک رشته رادارید.
چه استفاده کنیم ؟
هنگامی‌که شما یک رشته از شیءها مانند لیست زیر دارید:
|
1 2 3 4 5 |
$scope.cars = [ {model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"}, {model : "Volvo XC90", color : "black"} ]; |
دستورالعمل ng-repeat دارای محدودیت انتخاب یک رشته به‌عنوان مقدار می‌باشد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>لطفا یک ماشین انتخاب کنید:</p> <select ng-model="selectedCar"> <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> </select> <h1>انتخاب شما: {{selectedCar}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = [ {model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"}, {model : "Volvo XC90", color : "black"} ]; }); </script> <p>هنگامی که از دستورالعمل ng-repeat استفاده میکنید دارای محدودیت انتخاب ارزش خواهید بود و مقدار value حتما باید از نوع رشته باشد.</p> <p>در این مثال شما فقط باید یک مقدار بین رنگ یا مدل به عنوان value انتخاب کنید!.</p> |
در حال که دستورالعمل ng-option محدودیتی برای انتخاب ندارد و تمامی شیءها را می‌پذیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>لطفا یک ماشین انتخاب کنید:</p> <select ng-model="selectedCar" ng-options="x.model for x in cars"> </select> <h1>انتخاب شما: {{selectedCar.model}}</h1> <p>رنگ: {{selectedCar.color}}</p> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = [ {model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"}, {model : "Volvo XC90", color : "black"} ]; }); </script> <p>هنگامی که شما از دستورالعمل ng-options استفاده میکنید می‌توانید مقدار ارزشی را از نوع شی قرار دهید.</p> <p>در این مثال شما می‌توانید جفت مقدار رنگ و مدل را در المان های انتخابی انتخاب کنید.</p> |
هنگامی‌که شما بتوانید یکشی را به‌عنوان مقدار بپذیرید قطعاً می‌توانید اطلاعات بیشتری استفاده کنید و اپلیکیشن شما قابل‌انعطاف خواهد شد. به همین دلیل ما در این آموزش از دستورالعمل ng-options استفاده می‌کنیم.
منبع داده به عنوان یک شی
در مثال‌های قبل ما از آرایه‌ها به‌عنوان منبع داده استفاده می‌کردیم اما میتوان از شیءها نیز به‌عنوان منبع داده استفاده کرد.
فرض کنید شما نیز یک شیء باارزش کلیدی و مشترک دارید:
|
1 2 3 4 5 |
$scope.cars = { car01 : "Ford", car02 : "Fiat", car03 : "Volvo" }; |
استفاده از اصلاحات در دستورالعمل ng-options مقداری برای شیءها متفاوت است:
در استفاده از شیءها به‌عنوان منبع داده، x مقدار کلیدی و y مقدار ارزشی را تکرار خواهد کرد. برای درک بهتر این موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>لطفا یک ماشین انتخاب کنید:</p> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select> <h1>انتخاب شما: {{selectedCar}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = { car01 : "Ford", car02 : "Fiat", car03 : "Volvo" } }); </script> |
مقدار انتخاب‌شده همیشه به‌عنوان value در key-value شناخته میشود.
Value در key-value نیز می‌تواند یک شیء باشد.
مقدار انتخاب‌شده همیشه به‌عنوان value در key-value شناخته میشود، با این تفاوت که این بار از شیء استفاده کردیم:
|
1 2 3 4 5 |
$scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"} }; |
خانه‌های لیست کشویی نباید از جنس key در key-value باشند، فقط می‌توانند value یا خاصیتی از شیء value باشند
برای درک بهتر این موضوع به مثال زیر توجه کنید :
|
1 2 |
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select> |
امیدوارم این آموزش هم برای شما عزیزان مفید واقع‌شده باشد.
برای خواندن مطالب بیشتر دراین‌باره می‌توانید به سایت w3schools مراجعه فرمایید.
پیروز باشید.
