<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div ng-controller="DealersCtrl as ctrl">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
<button type="button" ng-click="ctrl.expandAll(allExpanded = !allExpanded)">
<span ng-bind="allExpanded ? '-' : '+'"></span>
</button>
</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>ZIP Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dealer in ctrl.dealers">
<td>
<button ng-click="expanded = !expanded" expand>
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td ng-bind="dealer['Dealer Name']"></td>
<td ng-bind="dealer.Address"></td>
<td ng-bind="dealer.City"></td>
<td ng-bind="dealer.State"></td>
<td ng-bind="dealer['ZIP Code']"></td>
</tr>
<tr ng-repeat-end ng-show="expanded">
<td></td>
<td colspan="6">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Brand</th>
<th style="width:15%;">Product I</th>
<th style="width:15%;">Product II</th>
<th style="width:15%;">Product III</th>
<th style="width:15%;">Product IV</th>
<th style="width:15%;">Product V</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="brand in dealer.Brands">
<td ng-bind="brand.Brand"></td>
<td style="width:15%;" ng-bind="brand['Product I']"></td>
<td style="width:15%;" ng-bind="brand['Product II']"></td>
<td style="width:15%;" ng-bind="brand['Product III']"></td>
<td style="width:15%;" ng-bind="brand['Product IV']"></td>
<td style="width:15%;" ng-bind="brand['Product V']"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script data-require="angular.js@1.2.28" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<script data-require="angular-resource@1.2.28" data-semver="1.2.28" src="http://code.angularjs.org/1.2.28/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>
(function() {
"use strict";
angular.module('myApp', ['ngResource'])
.factory('Dealers', function($resource) {
return $resource('dealers.json');
})
.controller('DealersCtrl', function($scope, Dealers) {
var self = this;
self.dealers = Dealers.query();
self.expandAll = function(expanded) {
// $scope is required here, hence the injection above, even though we're using "controller as" syntax
$scope.$broadcast('onExpandAll', {
expanded: expanded
});
};
})
.directive('expand', function () {
function link(scope, element, attrs) {
scope.$on('onExpandAll', function (event, args) {
scope.expanded = args.expanded;
});
}
return {
link: link
};
});
}());
div>table>tbody>tr:nth-child(4n+1) {
background-color:#dcdcdc;
}
div>table>tbody>tr:nth-child(even)>td {
border: none;
padding: 0;
}
[
{
"DealerID": 1,
"Dealer Name": "Dealer 1",
"Address": "123 Main St",
"City": "Irvine",
"State": "CA",
"ZIP Code": 92603,
"Brands": [
{
"Brand": "Brand A",
"Product I": "",
"Product II": "X",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
},
{
"Brand": "Brand B",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
}
]
},
{
"DealerID": 2,
"Dealer Name": "Dealer 2",
"Address": "456 2nd Av",
"City": "Portland",
"State": "OR",
"ZIP Code": 97225,
"Brands": [
{
"Brand": "Brand A",
"Product I": "X",
"Product II": "X",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand C",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand D",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
}
]
},
{
"DealerID": 3,
"Dealer Name": "Dealer 3",
"Address": "123 Third St",
"City": "Irvine",
"State": "CA",
"ZIP Code": 92603,
"Brands": [
{
"Brand": "Brand A",
"Product I": "",
"Product II": "X",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
},
{
"Brand": "Brand B",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
}
]
},
{
"DealerID": 4,
"Dealer Name": "Dealer 4",
"Address": "456 4th Av",
"City": "Portland",
"State": "OR",
"ZIP Code": 97225,
"Brands": [
{
"Brand": "Brand A",
"Product I": "X",
"Product II": "X",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand C",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand D",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
}
]
},
{
"DealerID": 5,
"Dealer Name": "Dealer 5",
"Address": "123 Fifth St",
"City": "Irvine",
"State": "CA",
"ZIP Code": 92603,
"Brands": [
{
"Brand": "Brand A",
"Product I": "",
"Product II": "X",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
},
{
"Brand": "Brand B",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
}
]
},
{
"DealerID": 6,
"Dealer Name": "Dealer 6",
"Address": "456 6th Av",
"City": "Portland",
"State": "OR",
"ZIP Code": 97225,
"Brands": [
{
"Brand": "Brand A",
"Product I": "X",
"Product II": "X",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand C",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand D",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
}
]
},
{
"DealerID": 7,
"Dealer Name": "Dealer 7",
"Address": "123 Seventh St",
"City": "Irvine",
"State": "CA",
"ZIP Code": 92603,
"Brands": [
{
"Brand": "Brand A",
"Product I": "",
"Product II": "X",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
},
{
"Brand": "Brand B",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
}
]
},
{
"DealerID": 8,
"Dealer Name": "Dealer 8",
"Address": "456 8th Av",
"City": "Portland",
"State": "OR",
"ZIP Code": 97225,
"Brands": [
{
"Brand": "Brand A",
"Product I": "X",
"Product II": "X",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand C",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand D",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
}
]
},
{
"DealerID": 9,
"Dealer Name": "Dealer 9",
"Address": "123 Ninth St",
"City": "Irvine",
"State": "CA",
"ZIP Code": 92603,
"Brands": [
{
"Brand": "Brand A",
"Product I": "",
"Product II": "X",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
},
{
"Brand": "Brand B",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
}
]
},
{
"DealerID": 10,
"Dealer Name": "Dealer 10",
"Address": "456 10th Av",
"City": "Portland",
"State": "OR",
"ZIP Code": 97225,
"Brands": [
{
"Brand": "Brand A",
"Product I": "X",
"Product II": "X",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand C",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "",
"Product V": "X"
},
{
"Brand": "Brand D",
"Product I": "",
"Product II": "",
"Product III": "X",
"Product IV": "X",
"Product V": "X"
}
]
}
]
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div ng-controller="DealersCtrl as ctrl">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>-</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>ZIP Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dealer in ctrl.dealers">
<td>-</td>
<td ng-bind="dealer['Dealer Name']"></td>
<td ng-bind="dealer.Address"></td>
<td ng-bind="dealer.City"></td>
<td ng-bind="dealer.State"></td>
<td ng-bind="dealer['ZIP Code']"></td>
</tr>
<tr ng-repeat-end>
<td></td>
<td colspan="5">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Brand</th>
<th style="width:15%;">Product I</th>
<th style="width:15%;">Product II</th>
<th style="width:15%;">Product III</th>
<th style="width:15%;">Product IV</th>
<th style="width:15%;">Product V</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="brand in dealer.Brands">
<td ng-bind="brand.Brand"></td>
<td style="width:15%;" ng-bind="brand['Product I']"></td>
<td style="width:15%;" ng-bind="brand['Product II']"></td>
<td style="width:15%;" ng-bind="brand['Product III']"></td>
<td style="width:15%;" ng-bind="brand['Product IV']"></td>
<td style="width:15%;" ng-bind="brand['Product V']"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script data-require="angular.js@1.2.28" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<script data-require="angular-resource@1.2.28" data-semver="1.2.28" src="http://code.angularjs.org/1.2.28/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>