Geek asks and answers

How to display data with multiple arrays as an html table using angular.js?

Assuming the data is structured as:

[
 {name: 'first', data1: [1,2,3], data2: [4,5]},
 {name: 'second', data1: [9,8,7], data2: [6,6,4,5]}, 
 ...
]

(Note data1 and data2 are not fixed lengths and are not necessarily the same length).

I would like to create an html table, for example:

<table>
 <thead>
   <th> Name </th>
   <th> Data 1 </th>
   <th> Data 2 </th>
 </thead>
 <tbody>
  <tr>
    <td rowspan="4">first</td>
    <td>1</td>
    <td>4</td>
  </tr>
  <tr>   
    <td>2</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td rowspan="5">first</td>
    <td>9</td>
    <td>6</td>
  </tr>
  <tr>   
    <td>8</td>
    <td>6</td>
  </tr>
  <tr>   
    <td>7</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>5</td>
  </tr>
  <tr>   
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 </tbody>
<table>

Note that the display has at least one extra empty cell after the last bit of data in each column. I would like this cell, the first empty cell for each of data1 and data2, to have an ng-click handler that, if clicked, would display the input in this column instead of% nbsp; where you can enter a new value.

What is the best way to accomplish this?

, , , , :

[ { name: 'first', rowsNeeded: '4', data: [ [1,4], [2,5], [3, undefined], [undefined, undefined]], ... ]


 <tbody ng-repeat="item in flattenedData">
    <tr ng-repeat="data in item.data">
        <td ng-if="$first" rowspan="{{data.rowsNeeded}}">{{data.name}}</td>
        <td>{{data[0] == undefined ? '&nbsp;' : macroData[0] }}</td>
        <td>{{data[1] == undefined ? '&nbsp;' : macroData[1] }}</td>
    </tr>
</tbody>

. -, watch ? -, , click, "undefined" "& nbsp". , ?

!

+3
1

, . . (JSBin) , , :

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th ng-repeat="key in datas[0]|dataKeys">
                Data {{$index+1}}
            </th>
        </tr>
    </thead>
    <tbody ng-repeat="set in datas">
        <tr ng-repeat="row in (set|setMaxLength|range)">
            <td
              rowspan="{{(set|setMaxLength)+1}}"
              ng-if="!$index"
            >
                {{set.name}}
            </td>
            <td ng-repeat="data in (set|setDatas)">
                {{data[$parent.$index]}}
            </td>
        </tr>
        <tr>
            <td
              ng-repeat="data in (set|setDatas)"
              ng-click="editing = true"
            >
                <span ng-if="!editing">&nbsp;</span>
                <form
                  ng-submit="data[data.length] = input.value"
                  name="input"
                >
                    <input
                      type="text"
                      ng-if="editing"
                      ng-model="input.value"
                      autofocus
                    >
                </form>
            </td>
        </tr>
    </tbody>
</table>

angular
.module("app", [])
.controller("ctrl", function($scope) {
    $scope.datas = [{
        name: 'first',
        data1: [1, 2, 3],
        data2: [4, 5]
    }, {
        name: 'second',
        data1: [9, 8, 7],
        data2: [6, 6, 4, 5]
    }];
})
.filter("range", function() {
    return function(length) {
        return Array.apply(0, Array(length))
        .map(function(_, i) {
            return i;
        })
    }
})
.filter("dataKeys", function() {
    return function(set) {
        return Object.keys(set)
        .filter(function(key) {
            return key.indexOf("data") !== -1;
        })
    }
})
.filter("setDatas", function($filter) {
    return function(set) {
        return $filter("dataKeys")(set)
        .map(function(key) {
            return set[key]
        });
    }
})
.filter("setMaxLength", function($filter) {
    return function(set) {
        return $filter("dataKeys")(set)
        .map(function(key) {
            return set[key].length;
        })
        .sort().pop();
    }
})
+3

More articles:


All Articles