[英]How to pass values from Server to HTML in Servicenow Service Portal
我能够在服务器端提取我想在我们创建的 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 mb-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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.