لیست کشویی AngularJS

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>

آزمایش کنید

ng-options و ng-repeat

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

مثال

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

آزمایش کنید

به دلیل ng-repeat فرمان کد HTML یکسانی را برای هر یک از موارد آرایه تکرار می‌کند، بنابراین می‌توان از آن برای ایجاد گزینه‌ها در لیست کشویی استفاده کرد، اما 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:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>شما انتخاب کرده‌اید: {{selectedCar}}</h1>

آزمایش کنید

وقتی از مقدار به عنوان شیء استفاده می‌شود، از ng-value جایگزین value:

مثال

مقدار ng-repeat به عنوان شیء استفاده می‌شود:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>شما یک {{selectedCar.color}} {{selectedCar.model}} انتخاب کرده‌اید</h1>

آزمایش کنید

مثال

استفاده کنید ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>شما انتخاب کرده‌اید: {{selectedCar.model}}</h1>
<p>رنگ آن: {{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>شما انتخاب کرده‌اید: {{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"}
};

آزمایش کنید

آیتم‌های لیست کشویی نباید حتماً کلید ارزش باشندکلید، همچنین می‌تواند یک مقادیر یا ویژگی مقادیر باشد:

مثال

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

آزمایش کنید