<!DOCTYPE html>
<html ng-app="Plunker">
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="BodyCtrl">
<div class="container">
<p class="lead">Number of bisulfite sequences: {{included}} used / {{excluded}} excluded</p>
<div ng-repeat="analysis in analyses">
<br />
<p>Analysis {{analysis.name}}</p>
<button class="btn btn-success" ng-model="analysis.include" ng-click="set(analysis.include)">
Include this analysis
</button>
</div>
</div>
</body>
</html>
(function(angular) {
angular.module('Plunker', [])
.controller('BodyCtrl', ['$scope', function($scope) {
$scope.analyses = [
{name:1, include:true},
{name:2, include:true},
{name:3, include:true},
{name:"4, click me and it'll break!"},
{name:"5, click me and it'll break!"}
]
$scope.included = 0
$scope.excluded = $scope.analyses.length
$scope.set = function(include){
//more code to execute involving $scope.analyses
if(include){
$scope.included += 1
$scope.excluded -= 1
}
else{
$scope.excluded += 1
$scope.included -= 1
}
}
}]);
})(angular);
/* Styles go here */