table cell merge issue

rowspan 0 causes problem in latest chrome v 65

by Wayou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div ng-controller="testCtrl">
  <table>
    <thead>
      <tr>
        <th>name</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in list">
        <td ng-repeat="cell in getCells(user)" ng-if="!shouldHide($parent.$index,$index)" rowspan="{{getRowSpan($parent.$index, $index)}}">{{user[cell]}}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body {
  padding: 14px
}

table,
td,
th {
  border: 1px solid;
}

JavaScript

var app = angular.module("myApp", []);

app.controller('testCtrl', ['$scope', function($scope) {

  $scope.list = [{
    name: 'foo',
    age: 29
  }, {
    name: 'bar',
    age: 28
  }, {
    name: 'baz',
    age: 27
  }]

  $scope.shouldHide = function(row, col) {
    return row > 0 && col > 0
  }

  $scope.getCells = function(user) {
    return Object.keys(user).filter(key => {
      return !key.startsWith('$$')
    })
  }

  $scope.getRowSpan = function(row, col) {
    // 添加 ng-if 后 行列不对头了，先忽略
    return row == 1 && col == 1 ? $scope.list.length : 0
  }

}]);