در قسمت های قبل با ویژگی های مهم Angular آشنا شدیم و یاد گرفتیم چگونه با ترکیب آنها برنامه های ساده درست کنیم. یاد گرفتیم که چطور برنامه آنگولار را با Controller
کنترل کنیم. Controller
یکی از بخش های مهم برنامه است که در هر برنامه آنگولاری دیده می شود. در این قسمت نیز می خواهیم با دانش اندکی که از قسمت های قبل به دست آورده ایم یک برنامه ساده دیگر درست کنیم.
موضوعات قبل را حتما دنبال کنید:
- یادگیری AngularJS با مثال – ساخت نوار منو
- یادگیری AngularJS با مثال – Controller
- یادگیری AngularJS با مثال – ساخت سیستم CRUD ساده
حتما توجه کرده اید که وقتی وارد یک سایت فروشگاه آنلاین می شوید، چطور محصول مورد نظر را انتخاب و در سبد خرید اضافه می کنیم. در این مثال می خواهیم یک سبد خرید بسیار ساده درست کنیم که کاربر بتواند محصولات را از لیست محصولات انتخاب کند و همچنین می تواند تعداد اقلام را وارد و جمع کل خرید را بصورت real-time مشاهده کند (البته که قرار نیست فروشگاهی در ابعاد واقعی را پیاده سازی کنیم).
3
ابتدا اجازه دهید نگاهی به کدهای Controller
خود بیندازیم. همانطور که مشاهده می کنید آرایه products
را تعریف کرده ایم داخل آن اطلاعات 4
محصول به دلخواه را نشان می دهد. ما بطور پیشفرض به متغیرهای qty
(تعداد محصول انتخابی) و active
(آیا محصول انتخاب شده است یا نه) مقادیری اختصاص داده ایم. اگر خروجی را مشاهده کنید می بینید که محصول MacBook Pro انتخاب شده است، چون ما متغیر active
آن را true
قرار داده ایم. اگر می خواهید این محصول نیز همانند محصولات دیگر غیر فعال باشد false
را وارد کنید.
همانند قسمت قبل با استفاده از ng-repeat
محصولات را نمایش می دهیم. با هر بار کلیک بر روی محصول فعال/غیرفعال می شود و این بخاطر فراخوانی تابع زیر با ng-click
می باشد:
1 2 3 |
$scope.addToCart = function(item) { item.active = !item.active; }; |
ما وقتی محصولی را انتخاب می کنیم، آیتم انتخابی به رنگ سبز تغییر می یابد. برای این کار css زیر را به فایل css خود اضافه کرده ایم:
1 2 3 |
.active { background-color: #8ec16d; } |
آنگاه با استفاده از ng-class مشخص می کنیم که آیا محصول انتخاب شده است یا نه! اگر محصول انتخاب شده باشد، متغیر active
آن محصول به مقدار true
تغییر می باید و css فوق اجرا می شود:
1 |
ng-class="{ active:product.active }" |
همچنین برای محاسبه جمع کل تابع زیر را نوشته ایم که بسیار ساده است و نیازی به توضیح اضافی ندارد!
1 2 3 4 5 6 7 8 9 |
$scope.total = function() { var total = 0; angular.forEach($scope.products, function(item) { if (item.active) { total += (item.price * item.qty); } }); return total; }; |
تابع فوق ابتدا بررسی می کند که آیا مشخصه active
محصول فعال است یا نه، اگر فعال بود قیمت آن را به متغیر total
اضافه می کند و بصورت real-time
در view
نمایش می دهد:
1 |
<h3>Total: {{ total() | currency }}</h3> |
امیدوارم تا اینجا توانسته باشم انگیزه کار فریم ورک AngularJS را در شما ایجاد کنم. در مثال بعد چیزهای بیشتر یاد خواهیم گرفت پس منتظر قسمت بعدی باشید. 😉