JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="person in persons | orderBy:'score'"><input type="checkbox" ng-model="person.isChecked" ng-change="updateTotals(person)"/> {{person.name}} = {{person.score}} ({{person.isChecked}}) 

        </li>
    </ul>
    <div>{{message}}</div>
    <div>total score of checked persons: {{total}}</div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

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

function MyCtrl($scope, $window) {
    
    $scope.message = '';
    $scope.total = 0;
    
    $scope.persons = [
        {score: 1, name: 'Jim', isChecked: true},
        {score: 2, name: 'Joe', isChecked: false},
        {score: 3, name: 'Angie', isChecked: true}
    ];
    
    $scope.updateTotals = function(selectedPerson) {
        $scope.total = 0;
        for(var x=0; x < $scope.persons.length; x++) {
            var person = $scope.persons[x];
            if(person['isChecked']) {
             	$scope.total += person['score'];   
            }
        }
        if(selectedPerson !== undefined) {
        $scope.message = selectedPerson['name']+ " now has checked status: " + selectedPerson['isChecked'];
        }
    }
    
    $scope.updateTotals()
}