AngularJS 1.5 组件 ng-repeat 显示为表格答案

【问题标题】：AngularJS 1.5 component ng-repeat display as tableAngularJS 1.5 组件 ng-repeat 显示为表格
【发布时间】：2017-07-21 23:26:48
【问题描述】：

如何在组件中将ng-repeat显示为表格？为什么我的项目组件没有将数据显示为表格行？

这是Plunker 和代码：

index.html

<body ng-controller="MainCtrl as vm">
    <table border="1">
        <tbody>
            <item data="name" ng-repeat="name in vm.names"></item>
        </tbody>
    </table>
</body>

item.html

<tr>
  <td>{{$ctrl.data.first}}</td>
  <td>{{$ctrl.data.family}}</td>
</tr>

app.js

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

app.controller('MainCtrl', function($scope) {
  var vm = this;
  vm.names = [{family: "dela cruz", first: "juan"}, {family: "tamad", first: "juan"}]
});

angular.module('plunker').component('item', {
   templateUrl: 'item.html',
   bindings: {
     data: '='
   }
});

【问题讨论】：

发生这种情况是因为<tr>...</tr> 之外的tbody 无效html 并且浏览器会剥离标签。 Angular 根本没有机会看到 tr
@maximus，当我<item> 组件在<tbody> 标签内时，它怎么在外面？
在将模板插入tbody\之前加载并评估模板
见this answer

标签： javascript angularjs angularjs-components angularjs-1.5

【解决方案1】：

请记住，元素保留在表格中，并且往往会破坏标准 HTML 表格 -> tbody -> tr -> td 结构。

对于这种特殊情况，我会执行以下操作：

angular
  .module('sampleApp', [])
  .controller('MainCtrl', function() {
    var vm = this;
    vm.names = [{family: "dela cruz", first: "juan"}, {family: "tamad", first: "juan"}];
  })
  .component('nameTable', {
     template: [
      '<table border="1">',
      '<tbody>',
      '<tr ng-repeat="name in $ctrl.data">',
      '<td>{{name.first}}</td>',
      '<td>{{name.family}}</td>',
      '</tr>',
      '</tbody>',
      '</table>'
     ].join(''),
     bindings: {
       data: '<'
     }
  });

<body ng-app="sampleApp" ng-controller="MainCtrl as vm">
  <name-table data="vm.names" ></name-table>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
</body>

【讨论】：

我没有在template 上硬编码html，而是创建了一个item.html 并将html 代码转储到那里。现在可以了！谢谢！