使用表的AngularJS递归模板

u2nhd7ah 于 2023-10-15 发布在 Angular

关注(0)|答案(1)|浏览(101)

我正在尝试如何在angularjs中使用table标签进行递归。我有以下数据结构

$scope.report = [{
  'Name': 'Moo',
  'Value': 'MooV',
  'Children': [{
    'Name': 'Moo2',
    'Value': 'Moo2V',
    'Children': [{
      'Name': 'Moo3',
      'Value': 'Moo3V'
    }]
  }]
}];

递归可以没有限制。我期待着把一个简单的表格的格式

<table>
  <tr>
    <td>Moo</td>
    <td>MooV</td>
  </tr>
  <tr>
    <td>Moo2</td>
    <td>Moo2V</td>
  </tr>
  <tr>
    <td>Moo3</td>
    <td>Moo3v</td>
  </tr>
<table>

但我无法让它正常工作这将允许我做某些事情的部分，而寻找单位的用户。目前我有代码

<div ng-app="app" ng-controller='AppCtrl'>
  <script type="text/ng-template" id="rloop">
    <td>{{data.Name}}</td>
    <td>{{data.Value}}</td>
    <tr ng-repeat="data in data.Children" ng-include src="'rloop'"></tr>
  </script>

  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="data in report" ng-include="'rloop'"></tr>
      <tr ng-repeat-end></tr>
    </tbody>
  </table>
  </div>

但这是行不通的，因为在重复它创建一个TR标签内的TR标签。我尝试了各种不同的方法来移动重复tbody等，但我似乎不能得到它的工作，由于HTML中的表的限制。例如，在tr中不允许。
JSFiddle在此显示问题：JSfiddle

angularjs

来源：https://stackoverflow.com/questions/72574457/angularjs-recursive-templates-using-tables

1条答案

按热度按时间

f4t66c6m1#

正如你所说，这在谈判桌上行不通。也许递归地将数据转换为Name/Value对的数组，然后以正常的方式使用它们会更好？

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

function includeChildren([first, ...rest]) {
    if (!first) return [];
  
    const {Name, Value, Children = []} = first;
  
    return [{Name, Value}, ...includeChildren(Children), ...includeChildren(rest)];
}

app.controller('AppCtrl', function ($scope) {
  $scope.report = [{
      'Name': 'Moo',
      'Value': 'MooV',
      'Children': [{
        'Name': 'Moo2',
        'Value': 'Moo2V',
        'Children': [{
          'Name': 'Moo3',
          'Value': 'Moo3V'
        }]
      }]
    }];
    
  $scope.reportTable = includeChildren($scope.report);
  // $scope.reportTable now contains: 
  // [{Name: 'Moo', Value: 'MooV'}, {Name: 'Moo2', Value: 'Moo2V'}, {Name: 'Moo3', Value: 'Moo3V'}]
});

现在你可以使用一个更令人惊讶的模板：

<div ng-app="app" ng-controller='AppCtrl'>
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
    <tr ng-repeat="data in reportTable">
      <td>{{data.Name}}</td>
      <td>{{data.Value}}</td>
    </tr>
    </tbody>
  </table>
</div>

看看它在这里工作：https://jsfiddle.net/k6rf9g1p/1/

赞(0）回复(0）举报 2023-10-15

我来回答

使用表的AngularJS递归模板

1条答案

相关问题

热门标签

最新问答