首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如果有使用角js的值列表,如何在一列中生成嵌套表?

如果有使用角js的值列表,如何在一列中生成嵌套表?
EN

Stack Overflow用户
提问于 2015-07-16 07:24:20
回答 2查看 1.1K关注 0票数 1

index.js

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
<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>

它给了我完美的表格,但问题在一列MyValues中。我有数据列表,并希望创建具有所有列表值的嵌套表。

我怎样才能做到这一点?要检查任何列是否有List,如果有,则生成嵌套表。检查这个柱塞http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-18 08:18:05

您可以这样编写标记:

代码语言:javascript
代码运行次数:0
运行
复制
<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>

完整代码:https://gist.github.com/anonymous/487956892d760c17487c

票数 1
EN

Stack Overflow用户

发布于 2015-07-16 16:28:09

我不太清楚你想要渲染什么,但这可能会给你一些想法。

请参阅:http://plnkr.co/edit/znswagx45a2F7IThdQJn?p=preview

app.js

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
<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>   

如果您需要更通用,也许您可以做一些类似于<div ng-if="value[0].Id">的事情,而不是<div ng-if="angular.isArray(value)">。虽然我没有时间试着让它发挥作用,但还是有一些事情要研究。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31447821

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档