Halo teman teman tentunya masih semangat yaa, buat belajar AngularJS nya, kita akan lanjut lagi pada tutorial sebelumnya kita telah membuat file indexnya, dan pada tutorial Cara Membuat Shopping Cart Menggunakan AngularJS part 2 kali ini kita akan membuat file js nya, seperti module dan controller, seperti yang kita ketahui bahwa fungsi dari module atau view yaitu data yang akan kita tapilkan untuk user dan sedangkan controller yaitu prosesnya atau alur kerja dari system yang akan kita buat.
Oke teman teman kita langsung saja masuk ke study casenya tentang Cara Membuat Shopping Cart Menggunakan AngularJS part 2, sebelumnya kita telah membuat file indexnya, kalau teman teman lupa bisa dilihat pada tutorial sebelumnya Cara Membuat Shopping Cart Menggunakan AngularJS part 1
Sekarang coba buat sebuah file baru dengan nama controller.js dan silahkan teman teman simpan script dibawah ini dengan nama controller.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{
id: 'KP001',
name: 'iPhone 6s',
price: 25000
},
{
id: 'KP002',
name: 'Toshiba',
price: 70000
},
{
id: 'KP003',
name: 'Macbook Pro',
price: 40000
},
{
id: 'KP004',
name: 'HP',
price: 20000
},
{
id: 'KP005',
name: 'Fujitsu',
price: 10000
},
{
id: 'KP006',
name: 'Notebook',
price: 8500
},
{
id: 'KP007',
name: 'Asus',
price: 8500
},
{
id: 'KP008',
name: 'Dell',
price: 8500
},
{
id: 'KP009',
name: 'Samsung',
price: 8500
},
{
id: 'KP010',
name: 'Lenovo',
price: 8500
},
{
id: 'KP011',
name: 'Apple',
price: 8500
},
{
id: 'KP012',
name: 'Sony',
price: 8500
},
];
$scope.myItems = [];
$scope.addItem = function(newItem) {
if($scope.myItems.length == 0) {
newItem.count = 1;
$scope.myItems.push(newItem);
}else {
var repeat = false;
for( var i = 0; i < $scope.myItems.length; i++ ) {
if($scope.myItems[i].id == newItem.id) {
$scope.myItems[i].count++;
repeat = true;
}
}
if(!repeat) {
newItem.count = 1;
$scope.myItems.push(newItem);
}
}
updatePrice();
};
var updatePrice = function() {
var totalPrice = 0;
for( var i = 0; i < $scope.myItems.length; i++ ) {
totalPrice += ($scope.myItems[i].count) * ($scope.myItems[i].price);
}
$scope.totalPrice = totalPrice;
};
//sepeti boşalt - empty your cart
$scope.removeBasket = function() {
$scope.myItems.splice(0, $scope.myItems.length);
updatePrice();
};
});
app.filter('reverse', function() {
return function(items) {
var x = items.slice().reverse();
if( items.length > 1 ) {
angular.element('#ok tr').css('background','#fff');
angular.element('#ok tr').filter(':first').css('background','lightyellow');
setTimeout(function() {
angular.element('#ok tr') .filter(':first').css('background','#fff');
}, 500);
}
return x;
};
});
Jika sudah berikutnya silahkan di save semua filenya, jika kita jalankan pada browser maka hasilnya akan seperti dibawah ini
Bagaimana teman teman cukup mudah bukan Cara Membuat Shopping Cart Menggunakan AngularJS, nya.
Cukup sekian dulu tutorial saya kali ini menggenai Cara Membuat Shopping Cart Menggunakan AngularJS part 2, semoga bermanfaat
Terimakasih.