[英]How to pass values from Server to HTML in Servicenow Service Portal
I am able to pull in data in server side that data i want to set in the HTML table boxes which we created.我能够在服务器端提取我想在我们创建的 HTML 表格框中设置的数据。
Below is my HTML code which creates table with row and columns.下面是我的 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>
For an example assume this is the data I got in Server side.例如,假设这是我在服务器端获得的数据。
(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 }
];
})();
Now from the server I want to pick the first array element and set in the table columns like现在从服务器我想选择第一个数组元素并设置在表列中
Serial Number should map to votes, title should map by title and enddate should map by end date序列号应映射到投票,标题应按标题映射,结束日期应按结束日期映射
On your server, populate the global data
object with data you want to pass to your HTML.在您的服务器上,使用要传递给 HTML 的数据填充全局data
对象。
Server Script:服务器脚本:
(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 }
];
})();
Then, in your HTML, you can use the ng-repeat
directive to iterate over the data.votes
array.然后,在您的 HTML 中,您可以使用ng-repeat
指令迭代data.votes
数组。 Using ng-repeat
will allow you to create multiple instances of the table <tr>
tags for each object within your array.使用ng-repeat
将允许您为数组中的每个对象创建表<tr>
标签的多个实例。
HTML Template: 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>
See working example below:请参阅下面的工作示例:
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.