AngularJS - Sepet İşlemlerinde Toplam Tutar Gösterme

E-Ticaret uygulamalarında sepet işlemlerinde bir ürünü sepete ekleme veya sepetten çıkarma işlemi yapmışsınızdır.
Bu işlemler sırasında toplam tutar alanının dinamik olarak değiştiğini görmüşsünüzdür.

Bu örneğimde AngularJS kullanarak bu olayı anlatacağım.

Sepetimizde bir adet ürün var. Fiyatı 100 TL olsun. ng-init alanında fiyat değişkenini 100, adet değişkenini 0 olarak tanımladım.Sepete Ekle butonuna tıkladığım zaman adet artacak,Sepetten Çıkar butonunda ise adet azalacak ve Toplam Tutar alanı ise dinamik olarak değişecektir.

Butonlara tıklayarak deneme yapabilirsiniz.

Adet: {{adet}}
Fiyat: {{fiyat}} TL
Toplam Tutar : {{adet*fiyat}} TL

Butona tıklayınca artma ve azalma işlemini yapan butonun click eventidir.AngularJS bu click eventi için ng-click directive'si sunuyor.Bu directive içerisine fonksiyon adı yazarak istediğiniz  işlemleri yapabilirsiniz.

Ekle ve Cıkar fonksiyonlarında adet üzerinde değişiklik yapıyor. Bu fonksiyonları Controller'ımızda tanımladık.

Kaynak kodlar

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="myCont" ng-init="adet=0;fiyat=100">
            Adet: {{adet}}
            <br />
            Fiyat: {{fiyat}} TL
       
          <br />
            <input type="button" ng-click="Ekle()" value="Sepete Ekle" />
            <input type="button" ng-click="Cikar()" value="Sepetten Çıkar" />
            <p>Toplam Tutar : {{adet*fiyat}} TL</p>
        </div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCont', function ($scope) {  
        $scope.Ekle = function () {
            $scope.adet = $scope.adet + 1;
        }
        $scope.Cikar = function () {
            if ($scope.adet > 1) {
                $scope.adet = $scope.adet- 1;
            }
            else {
                $scope.adet = 0;
            }
        }
    });
</script>
</body>
</html>




Yorumlar

Yorum Gönder