我能够在服务器端提取要在我们创建的HTML表格框中设置的数据。
下面是我的HTML代码,该代码创建具有行和列的表。
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table m-b-lg">
<thead>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book_ticket</td>
<td>x: y</td>
<td>p: q</td>
</tr>
</tbody>
</table>
例如,假设这是我在服务器端获得的数据。
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var votes = [
{ title: 'Apple', votes: 1, enddate: 2/22/2020 },
{ title: 'Milk', votes: 2 , enddate: 1/2/2020},
{ title: 'Carrot', votes: 3, enddate: 3/22/2020 },
{ title: 'Banana', votes: 2, enddate: 1/22/2020 }
];
})();
现在从服务器中我要选择第一个数组元素并在表列中进行设置,如
序列号应映射到投票,标题应按标题映射,结束日期应按结束日期映射
在服务器上,用要传递给HTML的数据填充全局data
对象。
服务器脚本:
(function() {
/* populate the 'data' object */
data.votes = [
{ title: 'Apple', votes: 1, enddate: 2/22/2020 },
{ title: 'Milk', votes: 2 , enddate: 1/2/2020},
{ title: 'Carrot', votes: 3, enddate: 3/22/2020 },
{ title: 'Banana', votes: 2, enddate: 1/22/2020 }
];
})();
然后,您可以在HTML中使用ng-repeat
指令遍历data.votes
数组。使用ng-repeat
将允许您为数组中的每个对象创建表<tr>
标记的多个实例。
HTML模板:
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table m-b-lg">
<thead>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vote in data.votes">
<td>{{vote.votes}}</td>
<td>{{vote.title}}</td>
<td>{{vote.enddate}}</td>
</tr>
</tbody>
</table>
</div>
请参见下面的工作示例:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.data = {};
$scope.data.votes = [{
title: 'Apple',
votes: 1,
enddate: '2/22/2020'
},
{
title: 'Milk',
votes: 2,
enddate: '1/2/2020'
},
{
title: 'Carrot',
votes: 3,
enddate: '3/22/2020'
},
{
title: 'Banana',
votes: 2,
enddate: '1/22/2020'
}
];
});
angular.element(document).ready(() => {
angular.bootstrap(document, ['myApp']);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-controller="myController">
<h2>Book Rooms v1</h2>
<table border="2" class="table m-b-lg">
<thead>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vote in data.votes">
<td>{{vote.votes}}</td>
<td>{{vote.title}}</td>
<td>{{vote.enddate}}</td>
</tr>
</tbody>
</table>
</div>