لیست انتخاب (Dropdown) در AngularJS

لیست انتخاب (Dropdown) در AngularJS

AngularJS به شما این امکان را می‌دهد تا بر اساس لیستی از عناصر درون یک آرایه و یا یک شی (object) ، یک dropdown بسازید

ساختن یک dropdown با استفاده از ng-options

اگر می‌خواهید با استفاده از یک object یا یک آرایه در AngularJS یک dropdown بسازید باید ازدایرکتیو 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> <p>This example shows how to fill a dropdown list using the ng-options directive.</p>

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

<div ng-app="myApp" ng-controller="myCtrl"> <select> <option>انتخاب کنید </option> <option ng-repeat="x in names">{{x}}</option> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; }); </script> <p>This example shows how to fill a dropdown list using the ng-repeat directive.</p>

دایرکتیو ng-repeat یک بلاک از کد HTML را برای هر عنصر داخل آرایه تکرار می‌کند و به همین دلیل می‌توان از آن برای ساخت گزینه‌های یک dropdown استفاده کرد، اما دایرکتیو ng-option به صورت اختصاصی برای ساختن گزینه‌های یک dropdown ساخته شده است و همچنین یک مزیت بزرگ نسبت به ng-repeat دارد. Dropdown‌هایی که با ng-option ساخته می شوند، گزینه های انتخاب شده را یک object و همچنین dropdown‌‌هایی که با ng-repeat ‌ساخته می شوند گزینه های انتخاب شده را یک رشته در نظر می‌گیرند.

مقایسه ng-options با ng-repeatp

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

<div ng-app="myApp" ng-controller="myCtrl"> <select> <option>انتخاب کنید </option> <option ng-repeat="x in names">{{x}}</option> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; }); </script> <p>This example shows how to fill a dropdown list using the ng-repeat directive.</p>

دایرکتیو ng-repeat یک بلاک از کد HTML را برای هر عنصر داخل آرایه تکرار می‌کند و به همین دلیل می‌توان از آن برای ساخت گزینه‌های یک dropdown استفاده کرد، اما دایرکتیو ng-option به صورت اختصاصی برای ساختن گزینه‌های یک dropdown ساخته شده است و همچنین یک مزیت بزرگ نسبت به ng-repeat دارد. Dropdown‌هایی که با ng-option ساخته می‌شوند، گزینه‌های انتخاب شده را یک object و همچنین dropdown‌‌هایی که با ng-repeat ‌ساخته می‌شوند گزینه‌های انتخاب شده را یک رشته در نظر می‌گیرند.

برای چه باید استفاده کنیم؟

فرض کنید مانند شکل زیر یک آرایه ای از object‌ها به صورت زیر در اختیار داریم:

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

دایرکتیو ng-repeatمحدودیت‌هایی دارد و هر گزینه انتخاب شده را یک رشته در نظر می گیرد:

<div ng-app="myApp" ng-controller="myCtrl"> <p>Select a car:</p> <select ng-model="selectedCar"> <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> </select> <h1>You selected: {{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>When you use the ng-repeat directive to create dropdown lists, the selected value must be a string.</p> <p>In this example you will have to choose between the color or the model to be your selected value.</p>

زمانی که از دایرکتیو ng-option استفاده می‌کنید، هر گزینه انتخاب شده را یک object در نظر می‌‌‌گیرد:

<div ng-app="myApp" ng-controller="myCtrl"> <p>Select a car:</p> <select ng-model="selectedCar" ng-options="x.model for x in cars"> </select> <h1>You selected: {{selectedCar.model}}</h1> <p>It's color is: {{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>When you use the ng-options directive to create dropdown lists, the selected value can be an object.</p> <p>In this example you can display both the model and the color of the selected element.</p>

گزینه های انتخاب شده به صورت object ،اطلاعات بیشتری درباره‌ی آن گزینه در خود نگه داری می‌کند و برنامه‌ی شما را انعطاف پذیرتر خواهد کرد. در این مقاله ما از دایرکتیو ng-option استفاده می‌کنیم.

منبع داده (Data Source ) به صورت یک object

در مثال‌هایی که در بالا گفته شد، data source ما یک آرایه بود اما ما می‌توانیم از object هم به عنوان data source استفاده کنیم.

فرض کنید یک object جفت مقدار ارزشی key-value pairs در اختیار داریم:

<div ng-app="myApp" ng-controller="myCtrl"> <p>Select a car:</p> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select> <h1>You selected: {{selectedCar}}</h1> </div> <p>This example demonstrates the use of an object as the data source when creating a dropdown list.</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.cars = { car01: "Ford", car02: "Fiat", car03: "Volvo" } }); </script>

بیان اتربیوت ng-option برای object به عنوان data source استفاده شده است و x بیانگر کلید (key) و y بیانگر مقدار (value) می‌باشد:

<div ng-app="myApp" ng-controller="myCtrl"> <p>Select a car:</p> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select> <h1>You selected: {{selectedCar.brand}}</h1> <h2>Model: {{selectedCar.model}}</h2> <h3>Color: {{selectedCar.color}}</h3> <p>Note that the selected value represents an object.</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.cars = { car01: { brand: "Ford", model: "Mustang", color: "red" }, car02: { brand: "Fiat", model: "500", color: "white" }, car03: { brand: "Volvo", model: "XC90", color: "black" } } }); </script>

در key-value pair ، گزینه انتخاب شده همیشه value می‌باشد. key-value pair می‌تواندیک object باشد. در مثال زیر خواهید دید که مقدار انتخاب شده در value pair – key و value و فقط یک مرتبه به صورت object خواهد بود .

<div ng-app="myApp" ng-controller="myCtrl"> <p>Select a car:</p> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select> <h1>You selected: {{selectedCar.brand}}</h1> <h2>Model: {{selectedCar.model}}</h2> <h3>Color: {{selectedCar.color}}</h3> <p>The visible text inside the dropdown list can also be a property of the value object.</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.cars = { car01: { brand: "Ford", model: "Mustang", color: "red" }, car02: { brand: "Fiat", model: "500", color: "white" }, car03: { brand: "Volvo", model: "XC90", color: "black" } } }); </script>



نظرات کاربران



عبارت امنیتی : حاصل 3 × 4 می شود :
متن پیام :