Angular JS ile Shopping List uygulaması

Angular JS'in hakim olduğu basit bir alışveriş listesi uygulaması yapımını anlatacağım. Bu uygulama, yapılacaklar listesi uygulaması ile aynı mantıktadır.

Uygulamanın işlevleri

• Kullanıcı ürün ekleyebilir ve kaldırabilir.
• Eklediği ürünün miktarını arttırıp azaltabilir.

Uygulamada bulunan script metotları; ekleme, silme, miktar değiştirme işlemini yapmaktadır. Değinilecek önemli metotlar ise javascript'te de kullanılan push() ve splice() metotlarıdır.

push metodu, listeye eleman eklemektedir. Öncelikle shoppingList adında boş bir dizi tanımlayıp diziye obje ekledik. itemName ve quantity keyleri dizinin elemanlarını oluşturacak obje yapısındadır.
quantity değerinin 1 olması diziye ilk elemanı eklediğimizde varsayılan olarak 1 olacaktır. newItem ise HTML tarafında ng-model'e karşılık gelir ve textbox'tan itemName key'ine atama yapmamızı sağlar.

  $scope.shoppingList = [];  
   $scope.shoppingList.itemName;  
   $scope.shoppingList.quantity;  
   $scope.addList = function () {  
     $scope.shoppingList.push({ itemName: $scope.newItem, quantity: 1 });  
     $scope.shoppingList.quantity = 1;  
     $scope.newItem = '';  
   }  

splice metodu ise diziden belirtilen indexten itibaren belirtilen sayıda eleman siler. Aşağıdaki metot ise eklenen üründen miktarı azalma işlemi yapar. Metotta kullandığımız splice metodu ile dizideki elemanın bulunduğu indexten bir eleman kadar silme işlemi yapar. Kısacası indexteki elemanı siler. quantity değeri 0 olduğunda -1 değerinin oluşmaması için diziden elemanı tamamen siler.

   $scope.minusOne = function (index) {  
     $scope.shoppingList[index].quantity -= 1;  
     if ($scope.shoppingList[index].quantity == 0) {  
       $scope.shoppingList.splice(index, 1);  
     }  
   }  

Uygulama görselleri ile işlevi daha iyi anlaşılacaktır. Liste dolu iken Kaldır butonu ile ürün tamamen kaldırılacak, + ve - butonları ile miktarında değişiklik yapılabilir. Ekle butonu ile ürün eklenecektir.

Projenin kodlarını incelemek için tıklayınız.