JSFiddle - React, Tailwind, and code Playground
by cejohnson
HTML
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<div class="thumbnail span3">
<h5>Configured Reports for Account ID:
{{MapForm.accountDropdown}}</h5>
<ul ng:repeat="report in reportConfigured.Reports">
<li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
</ul>
<div class="thumbnail">
<h5> reportConfigured2 Object </h5>
<ul ng:repeat="report in reportConfigured2.Reports">
<li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
</ul>
</div>
</div>
</div>
CSS
/*!
* Bootstrap v2.3.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content:"";
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:hover, a:active {
outline: 0;
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
#map_canvas img, .google-maps img {
max-width: none;
}
button, input, select, textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button, input {
*overflow: visible;
line-height: normal;
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding: 0;
border: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
label, select, button, input[type="button"],...
JavaScript
function Main() {
this.reportList = [];
this.reportConfigured = {
"Reports": {
"@xmlns": {
"$": "http:\/\/ws.wso2.org\/dataservice"
},
"Report": [{
"ReportID": {
"$": "20"
},
"ReportName": {
"@xmlns": {
"$": "null"
},
"$": "Examination Results"
},
"VisibleToPartner": {
"$": "false"
},
"ReportType": {
"@xmlns": {
"$": "null"
},
"$": "Examination Report"
},
"TemplateID": {
"$": "9"
}
}, {
"ReportID": {
"$": "163"
},
"ReportName": {
"@xmlns": {
"$": "null"
},
"$": "Scheduled Candidates with Test Center"
},
"VisibleToPartner": {
"$": "false"
},
"ReportType": {
"@xmlns": {
"$": "null"
},
"$": "Examination Report"
},
"TemplateID": {
"$": "220"
}
}, {
"ReportID": {
"$": "212"
},
"ReportName": {
"@xmlns": {
"$": "null"
},
"$": "Survey Report by Test"
},
"VisibleToPartner": {
"$": "false"
},
"ReportType": {
...