select box در آنگولار جی اس

برای ساخت select box در angular انگولار و همچنین ساخت لیست کشویی با انگولار جی اس

AngularJS به شما امکان می دهد لیست های کشویی را بر اساس اقلام موجود در یک آرایه یا یک شی ایجاد کنید.

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

مثال:

<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 = ["Emil", "Tobias", "Linus"];
});
</script>

</select>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

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

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

</select>

از آنجا که دستور “ng-repeat” یک بلوک از کد HTML را برای هر آیتم در یک آرایه تکرار می کند، می توان آن را برای ایجاد گزینه ها در یک لیست کشویی استفاده کرد، اما دستورالعمل های ng-options به خصوص برای پر کردن یک لیست کشویی با گزینه ها ساخته شده است. و دارای حداقل یک مزیت مهم است:

لیست کشویی با ng-options اجازه می دهد که مقدار انتخاب شده به عنوان یک شی باشد، در حالی که کشویی هایی که از ng-repeat ساخته شده اند باید یک رشته باشند.

چه استفاده کنم؟
فرض کنید شما یک آرایه از اشیا دارید:

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

$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>

<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>

</select>

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

<p>Its color is: {{selectedCar.color}}</p>

وقتی “value” انتخاب شده می تواند یک شی باشد، می تواند اطلاعات بیشتری را نگه دارد و برنامه شما می تواند انعطاف پذیر باشد.

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

منبع داده به عنوان یک شی
در نمونه های قبلی، منبع داده آرایه بود، اما ما همچنین می توانیم از یک شیء استفاده کنیم.

فرض کنید شما یک جسم با جفت “key-value” دارید:

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

$scope.cars = {

car01 : "Ford",

car02 : "Fiat",

car03 : "Volvo"

};

expretion در خصوصیت ng-options کمی برای اشیا متفاوت است:

مثال
با استفاده از یک شی به عنوان منبع داده، x نشان دهنده key است، و y نشان دهنده value یا مقدار است :

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

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

</select>

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

value شده همیشه value یک جفت key-value است.

value یک جفت -value keyنیز می تواند یک شی باشد:

مثال:

value انتخاب شده همچنان value در یک جفت key-value است، فقط این بار آن یک شی است:

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

$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 یا یک property از یک شیء value باشد:

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

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

5/5 - (1 امتیاز)

select box در آنگولار جی اس

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ