لیست های بازشو در آنگولار

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

آموزش طراحی سایت در کرج

آنگولار جی اس به شما امکان استفاده از لیست های باز شو را در یک آرایه یا یک شیئ را به شما میدهد

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

برای ایجاد یک لیست بازشو بر پایه شیئ یا یک آرایه در آنگولارجی اس، از دستورالعمل ng-options استفاده کنید:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

مشاهده نتیجه

مقایسه دو دستور العمل ng-options با ng-repeat

در مثال زیر با کمک دستورالعمل ng-repeat یک لیست بازشو ایجاد کرده ایم:

مشاهده نتیجه

تفاوت این دو لیست در این است که ng-options آیتم های لیست را بصورت شیئ بازمی گرداند درحالیکه ng-repeat آنها را بصورت رشته برمیگرداند. بنابراین بهتر است که از ng-options استفاده کنید.

کدامیک از این دو دستورالعمل را استفاده کنیم.

فرض بگیریم که شما آرایه ای از اشیاء دارید :

$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];

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

مثال:

استفاده از ng-repeat :

<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

مشاهده نتیجه

هنگام استفاده از دستورالعمل ng-options ، شیئ انتخاب شده میتواند یک شیئ باشد.

مثال

استفاده از ng-options :

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

مشاهده نتیجه

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

ما در این آموزش از دستورالعمل ng-options استفاده می کنیم .

منابع داده بصورت یک شیئ

در مثال قبل دادها بصورت آرایه بودند. ولی ما میتوانیم داده ها را بصورت شیئ را نیز درون لیست استفاده کنیم.

فرض کنید یک شیئ با جفت های از مقادیر کلیدی دارید:

$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};

مثال ng-options برای یک شیئ کمی متفاوت از آرایه خواهد بود:

برای استفاده از شیئ از X برای کلید و از Y برای مقدار آن استفاده کرده ایم:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar}}</h1>

مشاهده نتیجه

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

مقدار یک کلید در یک جفت میتواند یک شئی باشد:

مثال

مقدار انتخاب شده در این لیست یک شئی خواهد بود:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};