Cara Membuat Shopping Cart Menggunakan AngularJS part 2

Halo teman teman pastinya masih semangat yaa, bikin belajar AngularJS nya, kita akan lanjut lagi di panduan sebelumnya kita telah membangun file indexnya, dan di panduan Cara Merancang Shopping Cart Menggunakan AngularJS part 2 kali ini kita akan membangun file js nya, seperti module dan controller, seperti yang kita ketahui bahwa guna dari module atau view yaitu data yang akan kita tapilkan bagi user dan sedangkan controller yaitu prosesnya atau alur kerja dari system yang akan kita bikin.

Oke teman teman kita seketika saja masuk ke study casenya mengenai Cara Merancang Shopping Cart Menggunakan AngularJS part 2, sebelumnya kita telah membangun file indexnya, kalau teman teman lupa dapat dilihat di panduan sebelumnya Cara Membuat Shopping Cart Menggunakan AngularJS part 1

Kini coba bikin 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;
  };
});

Seandainya telah berikutnya silahkan di save segala filenya, kalau kita jalankan di browser karenanya hasilnya akan seperti dibawah ini

Bagaimana teman teman lumayan gampang bukan Cara Merancang Shopping Cart Menggunakan AngularJS, nya.

Lumayan demikian dulu panduan saya kali ini menggenai Cara Merancang Shopping Cart Menggunakan AngularJS part 2, semoga bermanfaat

Terimakasih.

Download Script

Cara Membuat Shopping Cart Menggunakan AngularJS Part 1

Sumber https://kursuswebsite.org