AngularJS 1.5組件ng-repeat顯示如表

如何在組件中將ng-repeat顯示爲表格？爲什麼我的項目組件不將數據顯示爲表格行？AngularJS 1.5組件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: '=' 
    } 
});

來源

2017-03-02 basagabi

這是因爲' ...'tbody'的'外面是無效的'html'和瀏覽器剝離標籤。 Angular沒有機會在所有 –

@ maximus處看到'tr'，當''組件位於''標籤內部時，它怎麼會出現在外？ – basagabi

在將模板插入'tbody' \ –

記住元素是保持在表格內並趨向於打破標準的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>

來源

2017-03-02 10:10:02

而不是'template'上的硬編碼html，我創建了一個'item.html'並在那裏轉儲了html代碼。它現在有效！謝謝！ – basagabi

AngularJS 1.5組件ng-repeat顯示如表

回答

相關問題