JSFiddle - React, Tailwind, and code Playground

by wholypantalones

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="item in items.intervalList">
            <label>{{item.userText}}</label>
            <input type="text" ng-model="item.userText" />
        </li>
        <li>
            <label>Empty</label>
            <input type="text" ng-model="fst.empty" />
        </li>
        <li>
            <label>Pass</label>
            <input type="text" ng-model="fst.pass" />
        </li>
    </ul>
    <hr class="space clearfix" /> <pre class="span6">{{fst|json}}</pre>

</div>

CSS

ul {
    list-style-type: none;
    margin-top: 1.5em;
}
hr.space {
    background: transparent;
    border: transparent;
}

JavaScript

var app = angular.module('angularjs-starter', []);

function MainCtrl($scope) {
    $scope.items = {
        "year": "2007",
        "make": "GMC",
        "model": "Yukon XL 1500",
        "engine": "6.2",
        "vehicleNickname": "Denali",
        "vin": "1GKFK66857J276722",
        "acesId": null,
        "engineConfigId": null,
        "legacyAaiaId": null,
        "vehicleId": 1617,
        "currentOdometer": 104182,
        "avgDistancePerDay": 31.827711936156557,
        "distanceUnit": "MILES",
        "oeSchedule": false,
        "memKey": null,
        "userMessage": "OE Maintenance Schedule for 2007 GMC Yukon XL 1500 Denali 6.2, VIN: 1GKFK66857J276722",
        "vehicleOwner": null,
        "intervalList": [{
            "dueDays": null,
            "dueDate": null,
            "dueDateString": null,
            "userText": "12 months - Every 12 months regardless of miles",
            "intervalDesc": "000000-012-000000-000-000000-ADV",
            "intervalType": "ADVANCED",
            "intervalCoupon": null,
            "milesText": "",
            "kilometersText": "",
            "monthsText": "Every 12 months regardless of miles/km",
            "scheduledHours": "0",
            "maintenanceOperations": [{
                "operationGroup": null,
                "operationId": "2.0260|5.0198|1.0140",
                "operationName": "Check/Report/Inspect",
                "sort": null,
                "serviceActionType": "Check/Report",
                "parts": null,
                "originalDueDate": null,
                "serviceStatus": null,
                "couponCount": 0,
                "childOperations": [{
                    "operationGroup": "Routine Vehicle Inspection",
                    "operationId": "2.0260",
                    "operationName": "Auto transmission selector warning device - Check",
                    "sort": "ROUTINEVEAUTOTRANS",
                    "serviceActionType": "Check",
                    "parts":...