Angular: Empty Fiddle

http://angularjs.org/

by Sajeetharan Sinnathurai

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 | match ">
      <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}}
        </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', []);

function MyCtrl($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;
  };
});