javascript - How do I generate nested table in one column if it has list of values using angular js?

Question

index.js

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
  $scope.cols = Object.keys($scope.data[0]);

  $scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}
});

index.html

<table border=1>
      <thead>
        <tr>
          <th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in data">
          <td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
        </tr>
      </tbody>
    </table>

It gives me perfect table but problem is in one column MyValues. I have list of data and want to create nested table with all List value.

How can I achieve this? Want to check if any column has List if yes then generate nested table. check this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Answer 1

I'm not really sure what you want to render, but this might give you some ideas.

see: http://plnkr.co/edit/znswagx45a2F7IThdQJn?p=preview

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
  $scope.cols = Object.keys($scope.data[0]);

  $scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}  
});

index.html

<table border=1>
  <thead>
    <tr>
      <th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">
        <div ng-if="value[0].Id">
          <table>
            <tr>
              <td>Id:</td><td>{{value[0].Id}}</td>
            </tr>
            <tr>
              <td>Value:</td><td>{{value[0].Value}}</td>
            </tr>
          </table>
        </div>
        <div ng-if="!(value[0].Id)">
          {{value}}
        </div>
      </td>
    </tr>
  </tbody>
</table>   

If you need to be more general, maybe instead of <div ng-if="value[0].Id"> you could do something like <div ng-if="angular.isArray(value)">. I didn't have time to try and get that working though, but something to look into.