مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در مباحث قبلی با چگونگی ایجاد و فرمت داده های جداول در AngularJS ، کاملا آشنا شدیم. در ادامه ی مباحث دوره ی جاری قصد داریم به مباحث کار با Select Box یا جعبه انتخاب در AngularJS به طور کامل بپردازیم.
جعبه انتخاب همان طور که از نامش پیداست همان لیست های dropdown کشویی است. که قبلا چگونگی کار با آن را در دوره آموزش html نیز ارائه کردیم. اکنون نیز می خواهیم همان ابزار را در AngularJS بررسی کنیم.
کار با Select Box یا جعبه انتخاب در AngularJS
AngularJS به شما امکان می دهد. لیست های کشویی را بر اساس اقلام موجود در یک آرایه یا یک شی ایجاد کنید.
ایجاد Select Box با استفاده از دستور ng-options
اگر می خواهید که یک لیست dropdown را بر اساس یک object یا آرایه در 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-repeat
شما همچنین می توانید از دستور ng-repeat برای ایجاد لیست های dropdown استفاده کنید.
مثال :
| <select> <option ng-repeat="x in names">{{x}}</option> </select> |
از آنجا که دستورالعمل ng-repeat تکرار یک بلوک از کد HTML برای هر آیتم در یک آرایه،است. می توان آن را برای ایجاد گزینه ها در یک لیست کشویی استفاده کرد. اما دستورالعمل های ng-options ، مخصوصا برای پر کردن لیست کشویی با گزینه ها ساخته شده است.
اما لیست های dropdown که با دستور ng-options ساخته شده است. اجازه می دهد که آیتم های انتخاب شده به عنوان یک شی باشد.در صورتیکه اگر از دستور ng-repeat برای ساختن لیست dropdown استفاده کنید. آیتم های لیست فقط می تواند رشته باشد.
نحوه استفاده
ابتدا آرایه ای از اشیا ایجاد می کنیم:
مثال :
| $scope.cars = [ {model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"}, {model : "Volvo XC90", color : "black"} ]; |
استفاده از دستور ng-repeat باعث می شود که آیتم انتخاب شده با فرمت string یا رشته باشد.
مثال :
| <select ng-model="selectedCar"> <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> </select> <h1>You selected: {{selectedCar}}</h1> |
زمانیکه از دستور 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 برای اشیا متفاوت است:
مثال :
| <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select> <h1>You selected: {{selectedCar}}</h1> |
ارزش 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"} }; |
گزینه های موجود در لیست کشویی لازم نیست که ارزش key-value باشد، همچنین می تواند یک مقدار یا یک ویژگی از یک شیء باشد:
مثال :
| <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select> |
کلام آخر
مباحث فوق که تحت عنوان کار با Select Box یا جعبه انتخاب در AngularJS برای شما ارائه گردید. ما چگونگی ایجاد و مدیریت لیست های dropdown را در AngularJS به طور کامل توضیح دادیم. امیدواریم که مطالب فوق به اندازه کافی برای شما مفید بوده باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
