JSFiddle - React, Tailwind, and code Playground

by simoneast

HTML

Select a membership type:

<div ng-app ng-controller="Simon">
    <div ng-repeat="item in items">
        <label>
            <input type="checkbox" ng-model="item.selected" />
            {{item.name}} ({{item.price}})
        </label>
        <span ng-show="item.selected">selected</span>
    </div>
    <div>TOTAL SELECTED: {{total()}}</div>

    <pre>{{items | json}}</pre>
</div>

JavaScript

function Simon($scope) {
    // List of items as JSON
    $scope.items = [
        {name: 'A', price: 1},
        {name: 'B', price: 2},
        {name: 'C', price: 3}
    ];
    
    // Calculate the total of all the selected items
    $scope.total = function() {
        var total = 0;
        $scope.items.forEach(function(i){
            if (i.selected) total += i.price;
        });
        return total.toFixed(2);
    };
}