JSFiddle - React, Tailwind, and code Playground

ANGULAR BASKET - factory calculations for cart totals, tax, shipping.

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="NavController">
  <table class="table">
    <thead>
      <tr>
        <th>Product   <generate-stars amount="amount"></generate-stars></th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>SKU-001-001</td>
        <td>{{itemprice}}</td>
      </tr>
      <tr class="info">
        <td>Shipping</td>
        <td>{{$root.basketshippingfee}}</td>
      </tr>
      <tr class="active">
        <td>Tax</td>
        <td>{{tax}}</td>
      </tr>
      <tr class="warning">
        <td colspan="1"></td>
        <td>{{total}}</td>
      </tr>


    </tbody>
  </table>
<hr>
TEST of Values:<br>
 shipping: {{$root.basketshippingfee}}<br>
  basket total: {{total}}<br>
<button ng-click="getShipping()">{{whatship ||'Whats Shipping'}}</button>

</div>

SCSS

.fa-star{
  color: #FD4;
  transition: all .25s;
}
,.fa-star-o{
  color: #eeeeee;
  transition: all .25s;
}
.fa-star:hover,.fa-star-o:hover {
  transform: rotate(-15deg) scale(1.3);
}

JavaScript

var app = angular.module('myApp', []);

app.factory("myfactory", function($http, $timeout, $filter, $rootScope) {
  return {
    basketTotal: function() {
      var ttl = 20; // so lets set it to our pre-determined sum 
      // loop basket and get full value of basket set as value
      // THEN SHIPPING  - using rootScope allows us to capture the data throughout the site $root
		 $rootScope.basketshippingfee = (ttl <= 20) ? 6 : $rootScope.ship;
      ttl = (ttl + $rootScope.basketshippingfee);
      return ttl
    },
    basketTax: function( ) {
      var bt =   $rootScope.tax;
      return bt
    },
    basketShipping: function( ) {
      var bs =  $rootScope.basketshippingfee ?  $rootScope.basketshippingfee : $rootScope.ship;
      return bs
    }
  }
  /*
    function funct1() {
   
   alert("ONE")
  return funct1()
  .then( function( data ) {
  funct2()
  });
    
    }

    function funct2() {
      alert("TWO")

    }

    return {
      funct1: funct1,
      funct2: funct2
    };*/
});


app.directive('generateStars', function() {
  var html = '<div style="display:inline-block"><i class="fa fa-star" ng-repeat="n in []| range:roundedAmount" ng-if="($index <= 5)"></i><i ng-repeat="n in [] | range:5-roundedAmount" ng-if="($index < 5) " class="fa fa-star-o text-muted"></i></div>';
  return {
    restrict: 'E',
    scope: {
      amount: '='
    },
    link: function(scope, element, attrs) {
      scope.roundedAmount = parseInt(scope.amount);
    },
    replace: true,
    template: html
  };
})

app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++)
      input.push(i);
    return input;
  };
});


app.controller('NavController', function(myfactory, $rootScope) {
// THESE VALUES ARE PULLED FROM OUR GLOBAL VARS and DB of BASKET ITEMS
  $rootScope.ship = 0;
  $rootScope.tax = 0; // 0 rated for online only
  $rootScope.itemprice = 20; // We will reference LS for this.
  // We can set...