gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 15:28:48 26 4
gpt4 key购买 nike

如何在组件中将 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>

应用程序.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: '='
}
});

最佳答案

请记住,该元素保留在表格中,并且往往会破坏标准的 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>

关于javascript - AngularJS 1.5 组件 ng-repeat 显示为表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42552000/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com