آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

دوره آموزشی AngularJS

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

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

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

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

اگر می خواهید با استفاده از یک object یا یک آرایه در AngularJS یک dropdown بسازید باید از دایرکتیو ng-option استفاده کنید. به عنوان مثال:

نمونه 1

امتحان کنید

 

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

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

نمونه 2

امتحان کنید

 

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

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

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

$scope.cars = [

       { model: "Ford Mustang", color: "red" },

       { model: "Fiat 500", color: "white" },

       { model: "Volvo XC90", color: "black" }

];

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

نمونه 3


You selected: {{selectedCar}}

امتحان کنید

 

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

نمونه 4


You selected: {{selectedCar.model}}

It's color is: {{selectedCar.color}}

امتحان کنید

 

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

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

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

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

نمونه 5


You selected: {{selectedCarl}}

امتحان کنید

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

نمونه 6

$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 pair ، گزینه انتخاب شده همیشه value می باشد. value در key-value pair می تواند یک object باشد. در مثال زیر خواهید دید که مقدار انتخاب شده در key-value pair ، value و فقط یک مرتبه به صورت object خواهد بود.

 

  • 813
  •    1144
  • تاریخ ارسال :   1394/12/20

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .