Array内のArrayからAngularJsテーブルを描画する方法は？

Question

function MyCtrl($scope) { 
 
    $scope.items = [1, 2, 3, [4, 5, 6]]; 
 
}

td, th { 
 
    border: 1px solid black; 
 
    width: 60px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app=""> 
 
    <div ng-controller="MyCtrl"> 
 
    <h4>This is what I want to make but Data is [1, 2, 3, [4, 5, 6]]</h4> 
 
    <table> 
 
     <tr> 
 
     <th ng-repeat="item in [1, 2, 3, 4, 5, 6]">head - {{item}}</th> 
 
     <tr> 
 
    </table> 
 
    <h1>This is what I have tried</h1> 
 
    <table> 
 
     <tr> 
 
     <tr ng-repeat="item in items"> 
 
      <th ng-show="isNan(item)" ng-repeat="head in item">{{head}}</th> 
 
      <th ng-hide="isNan(item)">{{item}}</th> 
 
     </tr> 
 
     <tr> 
 
    </table> 
 
    </div> 
 
</div>

あなたは、このための任意のアイデアを持っている場合は、私を助けてください。

オリジナルのロジックはこのようです。

すべてのユーザーには情報があります。名前、キー、パスワードと同様。また、施設もあります。各施設にはオプションがあります。タイプ、色など。

私は1行にユーザー情報を表示したいと思います。

私はすべての情報キーを1行に記載する必要があります。

[4,5,6]は施設であり、ユーザーは複数の機能を持つことができます。

これまでにこの問題を抱えている人はいますか？

Answer 1

LoDashというライブラリを含め、アイテムの配列に対して_.flattenDeepメソッドを呼び出してみてください。それは期待どおりに動作するはずです。

function MyCtrl($scope) { 
 
    $scope.items = [1, 2, 3, [4, 5, 6]]; 
 
    $scope.items = _.flattenDeep($scope.items); 
 
}

td, th { 
 
    border: 1px solid black; 
 
    width: 60px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script> 
 
<div ng-app=""> 
 
    <div ng-controller="MyCtrl"> 
 
    <table> 
 
     <tr> 
 
     <th ng-repeat="item in items">head - {{item}}</th> 
 
     <tr> 
 
    </table> 
 
    </div> 
 
</div>