Question

我正在尝试使用以下代码在表中显示来自JSON数组的数据。但是所有数据都显示在一行中。它应显示为每行中的每条记录，其中灰色为偶数，白色为奇数。但我犯了一些错误，我无法识别它。

CSS样式：

  <dependencies>
    <dependency>
      <groupId>cider</groupId>
      <artifactId>cider-nrepl</artifactId>
      <version>0.10.0-SNAPSHOT</version>
    </dependency>
    <dependency>
      <groupId>org.clojure</groupId>
      <artifactId>clojure</artifactId>
      <version>1.5.1</version>
    </dependency>
    <dependency>
      <groupId>org.apache.kafka</groupId>
      <artifactId>kafka_2.10</artifactId>
      <version>0.8.2.1</version>
      <exclusions>
        <exclusion>
          <groupId>org.apache.zookeeper</groupId>
          <artifactId>zookeeper</artifactId>
        </exclusion>
        <exclusion>
          <groupId>log4j</groupId>
          <artifactId>log4j</artifactId>
        </exclusion>
        <exclusion>
          <groupId>slf4j-api</groupId>
          <artifactId>org.slf4j</artifactId>
        </exclusion>
      </exclusions>
    </dependency>
    <dependency>
      <groupId>org.apache.storm</groupId>
      <artifactId>storm-kafka</artifactId>
      <version>0.9.5</version>
    </dependency>
    <dependency>
      <groupId>org.apache.storm</groupId>
      <artifactId>storm-hdfs</artifactId>
      <version>0.9.5</version>
    </dependency>
    <dependency>
      <groupId>org.apache.storm</groupId>
      <artifactId>storm-core</artifactId>
      <version>0.9.5</version>
      <exclusions>
        <exclusion>
          <groupId>org.slf4j</groupId>
          <artifactId>log4j-over-slf4j</artifactId>
        </exclusion>
        <exclusion>
          <groupId>org.slf4j</groupId>
          <artifactId>slf4j-api</artifactId>
        </exclusion>
        <exclusion>
          <groupId>logback-classic</groupId>
          <artifactId>ch.qos.logback</artifactId>
        </exclusion>
      </exclusions>
      <scope>provided</scope>
    </dependency>
  </dependencies>

我的JSON的片段：

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>

我的输出：

所需的样式输出：

Answer 1

你应该首先在tr标签上放置ng-repeat而不是td标签。所以它应该是这样的：

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

编辑：如果你想让你的数据看起来像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>

Answer 2

您需要展开数据以匹配您希望它们显示的方式

$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/

使用AngularJS从Json数组显示数据

2 个答案: