AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<h2>Todo</h2>
<div ng-controller="demoCtrl">
<span class="button-group-header">Level:</span>
<div ng-repeat="level in formSettings.levels" class="btn-group">
<input type="radio" ng-model="qualification.level" value="{{level}}" />{{level}}
</div>
<br class="clearfix">
<span class="button-group-header">Subject:</span>
<select class="form-control" ng-model="qualification.subject" ng-options="subject for subject in formSettings.subjects">
<option value="">-- choose subject --</option>
</select>
{{subject}}
<br class="clearfix">
<span class="button-group-header">Grade:</span>
<div class="btn-group">
<div ng-repeat="grade in formSettings.grades" class="btn-group">
<input type="radio" ng-model="qualification.grade" value="{{grade}}">{{grade}}
</div>
</div>
<br class="clearfix">
<button class="btn btn-primary btn-block add-qual-btn" ng-click="addQualification()">+ Add qualification</button>
<ul>
<li ng-repeat="qualification in qualifications">
<p>Level: {{qualification.level}}, Subject: {{qualification.level}}, Grade: {{qualification.grade}}</p>
</li>
</ul>
</div>
JavaScript
function demoCtrl($scope) {
$scope.qualification = {};
$scope.qualifications = [];
$scope.formSettings = {
levels: [
'Higher',
'Standard'
],
subjects: [
'Biology',
'Chemistry',
'Math',
'Further Maths',
'Human Biology',
'Physics',
],
grades: [
'7',
'6',
'5',
]
};
$scope.addQualification = function () {
$scope.qualifications.push(angular.copy($scope.qualification));
};
}