空表格单元格

Question

I got an array with data. Now I'm dynamically creating a html table with AngularJS.

The data in the array is displayed, but there are also empty strings in the two dimensional array, like:

array = [[""],["name"],[""],["name2"]]

Is there a way to display the empty table cells?

Like this my table data is shifted.

If it helps:

var template = `
  <table class="objList" >
    <tr data-ng-repeat="z in colStorageItems | orderBy: \'-name\' track by $index">
      <th class = "col" data-ng-repeat="y in z | orderBy: \'name\' track by $index">
        {{y}}
      </th>
    </tr>
  </table>
`;

Thanks

Answer 1

You can use an if ng-if to filter empty items/rows out of the rendered html.

<tr ng-repeat="item in items " ng-if="item.dataField">
   <!-- Content of tr, item.dataField is not not "empty"-->
</tr>

Answer 2

The problem is that HTML table by default doesn't show empty cells. You can work around the problem using the css attribute empty-cells .

For example in your page you can include a tag style like the following:

<style>
    table { empty-cells: show; }
</style>

I hope it helps you, bye.