html - 如何在 Servicenow 服务门户中将值从服务器传递到 HTML
问题描述
我能够在服务器端提取我想在我们创建的 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 }
];
})();
现在从服务器我想选择第一个数组元素并在表格列中设置,如
序列号应映射到投票,标题应按标题映射,结束日期应按结束日期映射
解决方案
data
在您的服务器上,使用要传递给 HTML 的数据填充全局对象。
服务器脚本:
(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>
推荐阅读
- reactjs - 如何通过 webpack 4 优化 tree-shaking 库
- javascript - 长文本的省略号
- android - RxJava如何缓存静态observable
- powershell - 使用 TFPT PowerShell 查询多个工作项
- javascript - 构造函数参数属性的 ECMAScript 提案
- java - IDEA Intellij:下划线文件编译时错误
- node.js - nginx + node.js + websockets 的问题
- android - Android中的后备字体文件
- c# - DataSource 更改后刷新 DataGridViewComboBoxColumn 的项
- regex - 在文件中搜索 RegEx 字符串并仅返回文件名、路径和字符串