问题
I am able to pull in data in server side that data i want to set in the HTML table boxes which we created.
Below is my HTML code which creates table with row and columns.
<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
回答1:
On your server, populate the global data
object with data you want to pass to your HTML.
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. Using ng-repeat
will allow you to create multiple instances of the table <tr>
tags for each object within your array.
HTML Template:
<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 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>
来源:https://stackoverflow.com/questions/60825934/how-to-pass-values-from-server-to-html-in-servicenow-service-portal