如何在Servicenow服务门户中将值从服务器传递到HTML

问题描述

我能够在服务器端提取要在我们创建的HTML表格框中设置的数据.

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.

<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

推荐答案

在服务器上，用要传递给HTML的数据填充全局 data 对象.

On your server, populate the global data object with data you want to pass to your 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> 标记的多个实例.

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模板:

<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>

这篇关于如何在Servicenow服务门户中将值从服务器传递到HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！