如何在 Servicenow 服務門戶中將值從服務器傳遞到 HTML

Question

我能夠在服務器端提取我想在我們創建的 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 }
    ];

})();

現在從服務器我想選擇第一個數組元素並設置在表列中

序列號應映射到投票，標題應按標題映射，結束日期應按結束日期映射

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將允許您為數組中的每個對象創建表<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 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>