如何生成嵌套表中的一列，如果它有采用了棱角分明的js值列表？ [英] How do I generate nested table in one column if it has list of values using angular js?

问题描述

index.js

  VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围）{
  $ scope.name ='世界';  $ scope.data = [{ID：1，标题：EN-US，说明：UnitedStates的，MyValues​​：[{ID：100，值：保存 }]}，
{ID：1，标题：EN-UK，说明：英国，MyValues​​：[{ID：102，值：删除}]}]
  $ scope.cols = Object.keys（$ scope.data [0]）;  $ scope.notSorted =功能（OBJ）{
    如果（！OBJ）{
        返回[];
    }
    返回Object.keys（OBJ）;
}
}）;
 

index.html的

 ＆LT;表边框= 1＆GT;
      ＆LT;＆THEAD GT;
        ＆所述; TR＆GT;
          百分位NG重复=在notSorted键（COLS）NG-的init =值= COLS [关键]＆GT; {{}值}＆LT; /第i
        ＆LT; / TR＆GT;
      ＆LT; / THEAD＆GT;
      ＆LT;＆TBODY GT;
        ＆LT; TR NG重复=行数据＆GT;
          ＆LT; TD NG-IF =$！最后一个NG-重复=逸在notSorted（行）NG-的init =值=行[DAT]＆GT; {{值}}＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
      ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
 

这给了我完美的表，但是问题是在一列 MyValues​​ 。
我有数据列表，并希望创建嵌套表所有的列表值。

  

我怎样才能做到这一点？要检查是否有列有清单，如果是
  然后生成嵌套表。
  检查这个plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=$p$ PVIEW

解决方案

你写你的标记是这样的：

 ＆LT;表＆gt;
  ＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
      百分位在数据[0]（K，V）＆GT纳克重复=; {{ķ}}＆下; /第i
    ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
  ＆LT;＆TBODY GT;
    ＆LT; TR NG重复= GT中的数据项＆;
      ＆LT; TD NG重复=（道具，值）项NG-的init =isArr = IsArray的（值）＆GT;
        ＆LT;表NG-IF =isArr＆GT;
          ＆LT;＆THEAD GT;
            ＆所述; TR＆GT;
              百分位NG重复=（SH，SV）的值[0]＆GT; {{SH}}＆LT; /第i
            ＆LT; / TR＆GT;
          ＆LT; / THEAD＆GT;
          ＆LT;＆TBODY GT;
            ＆LT; TR NG重复=子价值＆GT;
              ＆LT; TD NG重复=（SK，SV）子＆GT; {{SV}}＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
          ＆LT; / TBODY＆GT;
        ＆LT; /表＆gt;
        ＆LT;跨度NG-IF =！isArr＆GT; {{}值}＆LT; / SPAN＆GT;
      ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

全部code： https://gist.github.com/anonymous/487956892d760c17487c

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

解决方案

You write your markup this way:

<table>
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr">
          <thead>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr> 
          </thead>
          <tbody>
            <tr ng-repeat="sub in value">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

Full code: https://gist.github.com/anonymous/487956892d760c17487c

这篇关于如何生成嵌套表中的一列，如果它有采用了棱角分明的js值列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！