Компонент AngularJS 1.5 ng-repeat отображает в виде таблицы

Как отобразить 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: '='
   }
});

javascript angularjs angularjs-components angularjs-1.5
person basagabi    schedule 02.03.2017    source источник
comment
Это происходит из-за того, что <tr>...</tr> за пределами tbody недопустимо html и браузер удаляет теги. У Angular вообще нет возможности увидеть tr   -  person Max Koretskyi    schedule 02.03.2017
comment
@maximus, почему он снаружи, когда компонент <item> находится внутри тега <tbody>?   -  person basagabi    schedule 02.03.2017
comment
когда angular загружает и оценивает шаблон перед их вставкой в ​​tbody\   -  person Max Koretskyi    schedule 02.03.2017
comment
см. этот ответ   -  person Max Koretskyi    schedule 02.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Помните, что элемент остается внутри таблицы и имеет тенденцию нарушать стандартную структуру HTML table -> 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>

person Gorka Hernandez    schedule 02.03.2017
comment
Вместо жестко запрограммированного html на template я создал item.html и выгрузил туда html-коды. Теперь это работает! Спасибо! - person basagabi; 02.03.2017