ng-repeat не передает данные из объекта JSON в шаблон HTML - PullRequest
Новая
       14

ng-repeat не передает данные из объекта JSON в шаблон HTML

0 голосов
/ 18 апреля 2019

Я пытаюсь отобразить json как таблицу в шаблоне HTML, используя элемент angularjs ng-repeat.Файл сценария передает объект JSON, но ng-repeat не будет отображать содержимое JSON.

Я следовал инструкциям из этой учебной ссылки.

https://codepen.io/salva341/pen/aYKmvG

html-раздел шаблона, где ng-repeat не отображается должным образом 

<div ng-controller="WorkflowShowCntrl">
   <table class="table striped">
     <thead>
        <th>Job Name</th>
        <th>Job Id</th>
        <th>Start Time</th>
        <th>Status</th>
      </thead>
      <tbody>
         <tr  ng-repeat="ttm in records.response" >
            <td>{{ttm.name}} </td>
            <td>{{ttm.status}} </td>
            <td>{{ttm.name}} </td>
            <td>{{ttm.name}} </td>
         </tr>
      </tbody>
   </table> 
</div>

app.js
angularjs 1.6.6 

$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
    $scope.records = {"response":response.data}
    $scope.parseItem = function(string)
    {
        var newString = string.replace(/['\']/g,'');
        var jsonFormated = JSON.parse(newString);
        return jsonFormated.Message;
    }
});

Инспектор Google Chrome: снимок экрана раздела Я использовал дополнительный инспектор angularjs для Chrome.

enter image description here

Ответы [ 3 ]

0 голосов
/ 18 апреля 2019

Согласно вашему коду, вы ссылаетесь на неправильное имя массива в HTML-привязке.

Попробуйте это 

<div ng-controller="WorkflowShowCntrl">
   <table class="table striped">
     <thead>
        <th>Job Name</th>
        <th>Job Id</th>
        <th>Start Time</th>
        <th>Status</th>
      </thead>
      <tbody>
         <tr  ng-repeat="item in records.response.ttm" >
            <td>{{item.name}} </td>
            <td>{{item.status}} </td>
            <td>{{item.name}} </td>
            <td>{{item.name}} </td>
         </tr>
      </tbody>
   </table> 
</div>
0 голосов
/ 19 апреля 2019

Наконец-то я смог добиться того, чего хотел.

Я добавил элемент ng-bind для отображения данных в html-шаблоне.Это странно.Ни одна из переменных области не отображается в шаблоне html без элемента ng-bind.Это странное расследование, это происходит.

Я хотел бы поблагодарить @Thaier Alkhateeb за их ценный комментарий.

Исправленный фрагмент кода 

<tbody ng-repeat="data in records.response ">
  <tr  ng-repeat="ttm in data">
    <td ng-bind="ttm.name"> </td>
    <td ng-bind="ttm.appId"> </td>
    <td ng-bind="ttm.created"> </td>
    <td ng-bind="ttm.status"> </td>
  </tr>
</tbody>
0 голосов
/ 18 апреля 2019

Похоже, ttm - это массив, для которого вы хотите отобразить. Поэтому я считаю, что ваш нг-повтор должен быть больше похож на: 

    <tr  ng-repeat="record in ttm" >
        <td>{{record.name}} </td>
    <td>{{record.status}} </td>
    <td>{{record.name}} </td>
    <td>{{record.name}} </td>

ttm - массив, а запись - выдуманное имя для каждого элемента в этом массиве.

См .: https://www.w3schools.com/angular/ng_ng-repeat.asp

...