jQuery DrillDown
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div ng-app="app" ng-controller="DataCtrl">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<table class="table table condensed categories-table">
<thead>
<tr style="background-color: #E3E3E3">
<th style="width: 5%"></th>
<th style="text-align: center">Categories</th>
<th style="text-align: center">LW $</th>
<th style="text-align: center">LW</th>
<th style="text-align: center">L4 W</th>
<th style="text-align: center">L13 W</th>
<th style="text-align: center">L52 W</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in category" class="parent">
<td ng-class="expand" drill-down>+</td>
<td>{{d.desc}}</td>
<td>{{d.LW$}}</td>
<td>{{d.LW}}</td>
<td>{{d.L4W}}</td>
<td>{{d.L13W}}</td>
<td>{{d.L52W}}</td>
</tr>
<tr ng-repeat="d in subcat" class="child">
<td ng-class="expand" drill-down>+</td>
<td>{{d.desc}}</td>
<td>{{d.LW$}}</td>
<td>{{d.LW}}</td>
<td>{{d.L4W}}</td>
<td>{{d.L13W}}</td>
<td>{{d.L52W}}</td>
</tr>
<tr>
<td></td>
<td>TOTAL</td>
...
CSS
[drill-down] {
background:red;
padding:8px;
cursor:pointer;
}
JavaScript
angular
.module('app',[])
.controller('DataCtrl',DataCtrl)
.directive('drillDown',drillDown);
function DataCtrl($scope) {
$scope.category = [
{
"desc": "CATEGORY 1",
"LW$": "45",
"LW": "-4%",
"L4W": "-15.7%",
"L13W": "24%",
"L52W": "-6%"
}
]
$scope.subcat = [
{
"desc": "SUB CATEGORY 1",
"LW$": "45",
"LW": "-4%",
"L4W": "-15.7%",
"L13W": "24%",
"L52W": "-9%"
},
{
"desc": "SUB CATEGORY 2",
"LW$": "15",
"LW": "4.2%",
"L4W": "1.7%",
"L13W": "-2.4%",
"L52W": "-65%"
},
{
"desc": "SUB CATEGORY 3",
"LW$": "767",
"LW": "4.2%",
"L4W": "9.7%",
"L13W": "-2.4%",
"L52W": "-21%"
},
{
"desc": "SUB CATEGORY 4",
"LW$": "21",
"LW": "14.2%",
"L4W": "1.7%",
"L13W": "-42.4%",
"L52W": "-34%"
}
];
}
function drillDown() {
var directive = {
restrict: 'A',
link: link
};
return directive;
function link(scope,element) {
var table = $('.categories-table');
table.each(function() {
var $table = $(this);
$table.find('.parent').each(function(){
if($(this).nextUntil('.parent', ".child").length > 0){
$(this).children('td:first').html('+');
}
});
$table.find('.child').each(function(){
if($(this).nextUntil('.child',...