lift off assignment

by rishul matta

HTML

<div ng-controller="dataTable">
  <table cellspacing="0px">
      <thead>
         <tr><td ng-repeat="header in headers">{{header}}</td> </tr>
      </thead>
      <tbody>  
          
        <tr ng-repeat="row in test" ng-class="{evenRow: $index%2==0}">
            <td rowspan="{{uniqueGroups[row.date+row.inventory]}}" ng-show="row.date" ng-bind="row.date"></td>  
            <td rowspan="{{uniqueGroups[row.date+row.inventory]}}" ng-show="row.inventory" ng-bind="row.inventory"></td>  
            
             <td rowspan="{{uniqueGroups[row.model]}}" ng-show="row.model">{{row.model}}</td>
             <td>{{row.City}}</td>
             <td>{{row.total_leads}}</td>
             <td>{{row.total_sales}}</td>
             <td>{{row.total_cash}}</td>
             <td>{{row.discount}}</td>
        </tr>
         
          
      </tbody>
  </table>
</div>

CSS

table
{
  text-align:left;   
    vertical-align:top;
    width:700px;
    
}

td{
    
    vertical-align:top;
    border:1px solid Gainsboro ;
}
thead > tr >td
{
  font-weight:bold;
    
}

.evenRow{
    background-color: lavender;
    
}

.oddRow{
        background-color:#fff;
    
}

JavaScript

var liftOffApp = angular.module('liftOffApp', []);


liftOffApp.controller('dataTable', function ($scope) {

var leads = [{
  date: '2013-09-20',
  inventory: 'Suzuki',
  model: 'Swift',
  City: 'Bangalore',
  total_leads: 4,
  total_sales: 2,
  total_cash: 289000,
  discount: 20000
},
{
  date: '2013-09-27',
  inventory: 'Tata',
  model: 'Nano',
  City: 'Bangalore',
  total_leads: 1,
  total_sales: 3,
  total_cash: 189000,
  discount: 14000
},
{
  date: '2013-09-27',
  inventory: 'Tata',
  model: 'Indica',
  City: 'Chennai',
  total_leads: 7,
  total_sales: 3,
  total_cash: 381000,
  discount: 14000
},
{
  date: '2013-09-27',
  inventory: 'Tata',
  model: 'Vista',
  City: 'Mumbai',
  total_leads: 3,
  total_sales: 1,
  total_cash: 181000,
  discount: 14000
},
{
  date: '2013-09-27',
  inventory: 'Tata',
  model: 'Vista',
  City: 'New Delhi',
  total_leads: 1,
  total_sales: 1,
  total_cash: 72000,
  discount: 9000
},
{
  date: '2013-09-27',
  inventory: 'Tata',
  model: 'Vista',
  City: 'Hyderabad',
  total_leads: 1,
  total_sales: 0,
  total_cash: 0,
  discount: 0
},
{
  date: '2013-11-13',
  inventory: 'Hyundai',
  model: 'Eon',
  City: 'Chennai',
  total_leads: 7,
  total_sales: 4,
  total_cash: 442000,
  discount: 14000
},
{
  date: '2013-11-13',
  inventory: 'Hyundai',
  model: 'Eon',
  City: 'Secunderabad',
  total_leads: 1,
  total_sales: 1,
  total_cash: 92000,
  discount: 7000
}
];
    
   
 var uniqueGroups=[];
    //logic to calculate the row spans for the repeated values. I am doing it on property name so one can put this in a function and pass the property names as the parameters to get the row spans but for that to also the template might need few changes.
    for(var i=0;i<leads.length;++i) {
        if(uniqueGroups[leads[i].date + leads[i].inventory]== undefined ){
            uniqueGroups[leads[i].date + leads[i].inventory]=1;        
        }
        else{
            uniqueGroups[leads[i].date +...