Select (Select)

اینجا «Select در AngularJS» را می سازیم. «Select» یعنی منوی کشویی. «دایرکتیو (Directive)» هم دستور ویژه HTML است. با ng-options و ng-repeat گزینه ها را از آرایه یا شیء می گیریم.

ساخت Select با ng-options

دایرکتیو 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 هم می شود. اما ng-options مخصوص Select است و تنظیمات بهتری دارد.

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

مشاهده در ادیتور

آرایه ای از شیءها؛ مقدار رشته یا شیء؟

اگر مقدار فقط نام مدل است، از value استفاده کن. اگر کل شیء را می خواهی، از ng-value کمک بگیر.

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

مشاهده در ادیتور

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{ x }}">{{ x.model }}</option>
</select>
<h1>You selected a {{ selectedCar.color }} {{ selectedCar.model }}</h1>

مشاهده در ادیتور

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

مشاهده در ادیتور

منبع داده شیء (Object) و الگوی (x, y)

وقتی منبع یک شیء است، x کلید و y مقدار است. برچسب می تواند کلید یا خصوصیت مقدار باشد.

<!-- cars = { car01: "Ford", car02: "Fiat", car03: "Volvo" } -->
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{ selectedCar }}</h1>

مشاهده در ادیتور

<!-- مقدارها هم می توانند شیء باشند -->
<!-- cars = { car01: { brand: "Ford", model: "Mustang", color: "red" }, ... } -->
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
<p>Brand: {{ selectedCar.brand }}</p>
<p>Model: {{ selectedCar.model }}</p>

مشاهده در ادیتور

گام های عملی

1. یک مدل انتخابی با ng-model بساز.
2. اگر منبع آرایه است، از ng-options شروع کن.
3. اگر شیء می خواهی، ng-value یا ng-options را به کار ببر.
4. برچسب ها را هوشمند بچین؛ مثلاً y.brand.

نکته: صفحه Select در AngularJS را نشانه گذاری کن. همچنین جداول و فیلترها مکمل این مبحث هستند.

جمع بندی سریع

• ng-options بهترین انتخاب برای Select است.
• با ng-repeat هم می شود، ولی کامل نیست.
• برای شیء، از ng-value یا ng-options استفاده کن.
• در منبع شیء، از الگوی (x, y) کمک بگیر.