Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to update shoping cart by Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 523
    Comment on it

    Hello Reader's if you want to build light process that update the shopping cart then you can see how to make the code. Lets start with the html page for shoping cart

    <form ng-app ng-controller="OrderFormController">
        <h1>Services</h1>
        <ul>    
            <li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
    
                {{service.name}} <span>{{service.price | currency}}</span>
            </li>
        </ul>
        <div class="total">
    Total: <span>{{total() | currency}}</span>
        </div>
    </form>
    

    Now build the Javascript for the calculations and fetching records

    function OrderFormController($scope){
        $scope.services = [
            {
                name: 'NODE Tutorial',
                price: 500,
                active:true
            },{
                name: 'BPO',
                price: 20,
                active:false
            },{
                name: 'Testing',
                price: 78,
                active:false
            },{
                name: 'Training',
                price: 220,
                active:false
            }
        ];
    $scope.toggleActive = function(s){
        s.active = !s.active;
    };
    
    $scope.total = function(){
    
        var total = 0;
        angular.forEach($scope.services, function(s){
            if (s.active){
                total+= s.price;
            }
        });
        return total;
    };
    }

    Now this script will load the dummy data like BPO, Testing etc. They will be shown with their price tag. If user select one it will change it's color to green and price will add to final checkout and if he again click on it then it will turn red and price will decrease from final payment. So you can easily attach this code in your website also.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: