Как передать значения с сервера на HTML в сервисном портале Servicenow - PullRequest
Новая
       10

Как передать значения с сервера на HTML в сервисном портале Servicenow

0 голосов
/ 24 марта 2020

Я могу получить на стороне сервера данные, которые я хочу установить в полях таблицы 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 }
];

})();

Теперь с сервера я хочу выбрать первый элемент массива и установить в столбцах таблицы, как

Серийный номер должен отображаться в голосах, заголовок должен отображаться по заголовку и дате окончания должны отображаться по дате окончания

1 Ответ

1 голос
/ 24 марта 2020

На вашем сервере заполните глобальный data объект данными, которые вы хотите передать вашему 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> тегов для каждого объекта в вашем массиве.

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