Отображение данных из массива Json с помощью AngularJS

Question

Отображение данных из массива Json с помощью AngularJS

0

Я пытаюсь отобразить данные из массива JSON в таблице, используя следующий код. Но все данные отображаются в одной строке. Он должен отображаться как каждая запись в каждой строке с серым цветом для четных и белых для нечетных. Но я ошибаюсь, я не могу его идентифицировать.

Стиль CSS:

table,td  {
    border: none;
    border-collapse: collapse;
    padding: 5px;
    width:1047px;
    height: 64px;
    left:16px;
    position:relative;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

My View (It is a partial view which is displayed from index.html):

      <h1 id="title">Shuttle Schedule</h1>
        <table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
            <thead  align="center">
                <th ng-repeat="row in module.csvInput">{{row.label}}</th>
                <th ng-repeat="row in module.csvInput">{{row.label}}</th>

            </thead>
            <tr align="center" >
                <td ng-repeat="row in module.csvInput" >
                    <div ng-repeat="(id, time) in row.times" ng-if="id <= 8">
                    {{time}}
                    </div>

                </td>
                <td ng-repeat="row in module.csvInput">
                    <div ng-repeat="(id, time) in row.times" ng-if="id > 8">
                        {{time}}
                    </div>

                </td>
            </tr>
        </table>
        <h3 class="noservice">No Service 1:20pm to 2:00pm<br> Driver can make additional runs beyond this schedule if needed.<br>
            D1 is 8910 Ridgeline Blvd. D4 is 8744 Lucent Blvd.</h3>
    </div>

Мой JSON Snippet:

{
  "modules": [


    {
      "title": "Shuttle Schedule",
      "feature": "shuttle",
      "order": 4,
      "csvInput": [
        {
          "label": "D1 PickUp",
          "times": [
            "8:00 AM",
            "8:30 AM",
            "9:00 AM",
            "9:30 AM",
            "10:00 AM",
            "10:30 AM",
            "11:00 AM",
            "11:30 AM",
            "12:00 PM",
            "12:30 PM",
            "1:30 PM"
          ]
        },
        {
        "label": "D4 PickUp",
        "times": [
          "7:50 AM",
          "8:20 AM",
          "8:50 AM",
          "9:20 AM",
          "9:50 AM",
          "10:20 AM",
          "10:50 AM",
          "11:20 AM",
          "11:50 AM",
          "12:20 PM",
          "12:50 PM",
          "1:10 PM"
        ]
      }
      ],
      "filter": null,
      "icon": "media/shuttle.svg"
    }
  ],
  "settings": {
    "buildings": 2,
    "floor": 4,
    "timeout": "120 (in seconds)",
    "cssOverride": "custom.css",
    "kiosk_coords": "200,200"
  }
}

Мой выход:

Желаемый результат моделирования:

binariedMe 03 нояб. 2015, в 06:40

Источник

0

Ничего не отображается, если я так делаю.
user3923166 03 нояб. 2015, в 06:36

Теги:

javascript

angularjs

json

css

2 ответа

Ещё вопросы

Ничего не отображается, если я так делаю.

binariedMe · Answer 1 · 2015-11-03T03-41-00.000Z

Сначала нужно поместить ng-repeat на тег tr, а не на тег td. Так должно быть что-то вроде:

<table> <tr ng-repeat="entity in list"><td>{{entity.lable}}</td> 
<td ng-repeat="time in entity.times">{{time}}</td></tr></table>

EDIT: если вы хотите, чтобы ваши данные выглядели в html: entity.label: entity.time entity.label: entity.time...

Тогда вы должны, вероятно, сделать это:

<table> <div ng-repeat="entity in list"><tr ng-repeat="time in entity.times><td ng-class-odd="'grey'" ng-class-even="'white'">{{entity.lable}}</td> 
<td ng-class-odd="'grey'" ng-class-even="'white'">{{time}}</td></tr></div></table>

Спасибо за ответ. Но ничего не отображается, если попробовать. Он отображает все в одной строке.
желаемый результат, указанный для справки, не соответствует предоставленным вами данным. Пожалуйста, покажите желаемый результат в соответствии с данными, и я могу вам помочь.
Желаемый результат будет похож на второй стиль изображения. Данные в D1 и D4 Pickup будут отображаться в каждой строке по-разному, а не все данные в одной строке.
Пожалуйста, ознакомьтесь с разделом редактирования ... А остальные стили всегда можно сделать с помощью директив ngClassOdd и ngClassEven ...
Я знаю, что стилизация может быть сделана на нечетных и четных рядах. Это уже применено. Но проблема в том, что все данные отображаются в 2 тд того же тр. Вместо 2 тд в каждой отдельной строке (tr).
Пожалуйста, используйте фрагмент кода в разделе редактирования, создайте два класса с именем grey и white для соответствующего фона строки и посмотрите, все ли работает ...

shyam · Answer 2 · 2015-11-03T04-48-00.000Z

Вам необходимо развернуть данные так, чтобы они отображались

$scope.module = data.modules[0];
var csvInput = $scope.module.csvInput;
$scope.headers = csvInput.map(x => x.label );
var rows = csvInput.map(x => x.times.slice(0, 8)).concat(csvInput.map(x => x.times.slice(8)));
var n = Math.max.apply(null, rows.map(x => x.length));
$scope.rows = [];
for ( i = 0; i < n; i++ ) {
  $scope.rows[i] = rows.map(x => x[i]);
}

И покажите эти данные

<table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
  <thead align="center">
    <th ng-repeat="row in headers">{{row}}</th>
    <th ng-repeat="row in headers">{{row}}</th>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="col in row track by $index">{{col}}</td>
    </tr>
  </tbody>
</table>

См. Http://jsfiddle.net/r0005a1t/