angular price options DDL + checkboxes

angular price options DDL + checkboxes

by Andrew Pougher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app class="container panel panel-default">
    <div ng-controller="showCrtl" class="row panel-body">
        <div ng-repeat="option in primaryCoverageOptions" class="">
            <label class="">
            <input type="checkbox" ng-model="coverageCosts[$index]" ng-true-value="{{option}}" ng-false-value="0"/>
            Add delivery: {{option | currency}}
            </label>                
        </div>
        <select ng-model="coverageCosts[2]" class="form-control">
            <option selected>Select one...</option>
            <option ng-repeat="option in specialCoverageOptions" ng-value="option">
                {{option | currency}}
            </option>
        </select>
        <h4 class="lead">TOTAL ANNUAL COST OF PRODUCT + SHIPPING</h4>
        <span class="alert alert-info">
        {{totalCost() | currency}}
        </span>
        <pre>
            Selected options: {{coverageCosts | json}}
        </pre>
        <br>
    </div>
</div>
<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

body{background:#ecece1}

JavaScript

function showCrtl($scope) {
    $scope.coverageCosts = [];
    $scope.totalCost = function (){
        return $scope.coverageCosts.reduce(function(sum, cost){
            return sum + parseInt(cost);
        },0);
    };
    $scope.primaryCoverageOptions = [10,20,30,40];
    $scope.specialCoverageOptions = [50, 100, 150,200,250,300];
}