Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://cdn.jsdelivr.net/angular.moment/1.0.1/angular-moment.min.js"></script>
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<table class="table-row">
<tr>
<!-- make this row exist only once -->
<td></td>
<td class="date-header" ng-repeat="date in dates">
{{date}}
</td>
</tr>
<tbody ng-repeat="s in stationary">
<tr>
<td class="boldTxt" colspan="{{dates.length+1}}">{{s.name}}</td>
</tr>
<tr>
<td>inventory</td>
<td ng-repeat="obj in s.data">
{{obj.inventory | match}}
</td>
</tr>
</tbody>
</table>
</div>
CSS
#header-row div {
display: inline-block;
margin-right: 10px
}
#header-row div:first-child {
margin-left: 130px
}
.table-row {}
table td {
padding: 10px;
border: 1px solid;
}
.boldTxt {
font-weight: bold;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.dates = ['1-10-2017', '2-10-2017'];
$scope.stationary = [{
"name": "Pen",
"data": [{
"date": "1-10-2017",
"inventory": 25
}, {
"date": "2-10-2017",
"inventory": 21
}]
}, {
"name": "Color Pencil",
"data": [{
"date": "1-10-2017",
"inventory": 3
}, {
"date": "2-10-2017",
"inventory": 0
}]
}, {
"name": "Color Pencil Special",
"data": [{
"date": "1-10-2017",
"inventory": 2
}, {
"date": "2-10-2017",
"inventory": 1 // hide this in the view since inventory of color pencil is zero
}]
}]
})
myApp.filter('match', function() {
return function(items) {
debugger;
var filtered = [];
var condition = false;
angular.forEach(items, function(item) {
angular.forEach(item.data, function(vals) {
if (vals.inventory == 0 && condition == false) {
condition = true;
} else if (vals.inventory != 0 && condition === false) {
if (filtered.indexOf(item) == '-1') {
filtered.push(item);
}
}
});
});
return filtered;
};
});