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

Question

我可以在服务器端提取我想在我们创建的 HTML table 框中设置的数据。

下面是我的 HTML 代码，它创建 table 行和列。

<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 }
    ];

})();

现在我想从服务器中选择第一个数组元素并设置在 table 列中，例如

序列号应映射到投票，标题应按标题映射，结束日期应按结束日期映射

Answer 1

在您的服务器上，使用您要传递给 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 将允许您为数组中的每个对象创建 table <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>

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

How to pass values from Server to HTML in Servicenow Service Portal

html

angularjs

servicenow