Angular - Report Part Generation

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
    <div id="reportSections" style="margin-bottom:10px;">
      <p>
      Report sections:
      </p>
      <ul>
      <li ng-repeat="s in sections"><label><input type="checkbox" ng-model="s.show">{{s.name}}</label></li>
      </ul>
    </div>
    <div id="Report">
      <table class="noborder">
      <tr>
        <td style="vertical-align: text-top;"class="noborder">
          <table ng-show="sections[0].show">
            <thead>
              <tr><th colspan="2">Student Information</th></tr>
            </thead>
            <tbody>
              <tr><td>Student Name</td><td>Jane Smith</td></tr>
              <tr><td>Student ID:</td><td>1234</td></tr>
              <tr><td>Address	</td><td>1 Main Street City, ST 12345</td></tr>
              <tr><td colspan="2"><b>Guardian/Parent Information</b></td></tr>
              <tr><td>Name</td><td>Mr. Smith</td></tr>
              <tr><td>Relation to Student</td><td>Father</td></tr>
              <tr><td>Cell Phone</td><td>(555) 555-5555</td></tr>
              <tr><td>Home Phone</td><td></td></tr>
              <tr><td>Work Phone</td><td>(555) 555-5555</td></tr>
              <tr><td>Email	</td><td>[email protected]</td></tr>
              <tr><td colspan="2" class="center">*Additional Contacts available in eSchoolPLUS</td></tr>
              <tr><td colspan="2"><b>Demographics</b></td></tr>
              <tr><td>Date of Birth</td><td>January 01, 2000</td></tr>
              <tr><td>Current Age</td><td>15</td></tr>
              <tr><td>Grade Level</td><td>10th Grade</td></tr>
              <tr><td>Expected Graduation Year</td><td>2018</td></tr>
              <tr><td>Foster Care	</td><td>YES</td></tr>
              <tr><td>Homeless</td><td></td></tr>
              <tr><td>Immigrant</td><td></td></tr>
              <tr><td>Migrant</td><td></td></tr>
             ...

CSS

body{
  background-color:white;
}
table, th, td {
   border-collapse:collapse;
border:1px solid #000000;
}
th, td {padding:4px;}
.noborder{
  border: 0px;
}
ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
    margin: 8px;
}

.center{
  text-align: center;
}

th { background-color:#cacaca;}

JavaScript

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

myApp.controller('homeController', function ($scope) {
	$scope.sections = [
  	{name:"Student Information", show:true}, 
  	{name:"Student Metrics", show:true},
    {name:"Attendance", show:true},
    {name:"Discipline", show:true},
    {name:"Assessments", show:true},
    {name:"DEWS", show:true},
    {name:"Discipline Detail", show:true},
    {name:"Enrollment History", show:true},
    {name:"Current Courses", show:true}];
});