JSFiddle - React, Tailwind, and code Playground

Mini Cart Filter. Check box total

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp">
     <h2>CART MINI</h2>

    <div ng-controller="startCtrl">
    
    <div class="panel panel-default">
      <div class="panel-heading"> <h2>Total Price {{selectedItems| getprice | currency}}</h2></div>
      <div class="panel-body">
    
    
       
        <div ng-repeat="x in names" class="list-group-item">
        <div class="checkbox">
  <label> <input type="checkbox" ng-model="item.isSelected" ng-change="value(item.isSelected,x)">{{x.name}} {{x.price}}</label>
</div>

        </div>
        <hr>
        <h3>Review selected  <ng-pluralize count="selectedItems.length" when="{'0': 'NONE','1' : 'item', 'other' : 'items'}"></ng-pluralize></h3>
       
        <div ng-repeat="y in selectedItems" ng-show="selectedItems.length>0"> {{y.name}}, {{y.price | currency}}</div>
        <div ng-show="selectedItems.length<=0">No <ng-pluralize count="selectedItems.length" when="{'0': 'NONE','1' : 'item', 'other' : 'items'}"></ng-pluralize> selected</div>
        </div>
         <div class="panel-footer">CHECK OUT</div>
    </div>
        
        
        
        
        
    </div>
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("startCtrl", function ($scope) {
    $scope.names = [{
        name: "TOOTHBRUSH",
        price: "0.34"
    }, {
        name: "DENTAL FLOSS",
        price: "0.50"
    }, {
        name: "SCURETTE",
        price: "350"
    }];
    $scope.selectedItems = [];
    $scope.value = function (isSelected, item) {
        if (isSelected == true) {
            $scope.selectedItems.push(item);
        } else {
            console.log(item.name);
            angular.forEach($scope.selectedItems, function (itemRmv, $index) {
                if (itemRmv.name == item.name) {
                    $scope.selectedItems.splice($index, 1);
                }
            })
        }
    }
});

app.filter('getprice', function () {
    return function (value, property) {
        var total = 0;
        angular.forEach(value, function (val, index) {
            total = total + parseFloat(val.price)
        });
        return total;
    }
});