Question

我收到一个看起来像这样的Json（我无法更改它）

{
  "name": "mike"
  "days": [
    {
      "timeperiods": [
        {
          "time": "08:00 - 12:00",
          "hours": 4,
          "task": "running"
        },
        {
           "time": "13:00 - 15:00",
           "hours": 4,
           "task": "triathlon"
        }
      ]
    },
    {
    "timeperiods": [
      {
        "time": "08:00 - 12:00",
        "hours": 3,
        "task": "swimming"
      }
    ]
    }
  ]
}

它不是一个完整的JSON示例。通常会有6天的对象。但我认为显示2个对象应该显示我的问题。我用html创建了一个表格，它显示了用户在某些日子里的任务。（我将JSON数据保存在名为weekplan的范围变量中。）

<table>
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wedesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="day in weekplan.days[0].timeperiods">
      <td>{{day.time}}</td>
      <td ng-if="day.hours == 0"><div></div></td>
      <td ng-if="day.hours != 999 && day.hours != 0">Time for Workout!!</td>

    </tr>
  </tbody>
</table>

它只能是一个ng - 如果是真的，那么两者都不是。我的问题是正确显示列。此表示例有效，但仅适用于时间列和星期一列。但我不知道如何让它在所有工作日上班。我想过在同一个td对象上使用ng-if和ng-repeat，但它确实没有用。（我需要两个ng-if for CSS规则，我从这个例子中删除了它导致它不是问题的一部分）。我想要的最终结果是一个表格，它可以显示特定时间段的空字段，也可以显示“锻炼时间”字段。这适用于所有工作日。

Answer 1

你的描述非常混乱，但如果逻辑上存在你的json，它将类似于：

HTML

<table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wedesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="day in weekplan.days">
        <td data-ng-repeat="period in day.timeperiods">
          <span>{{day.time}}</span>
          <span ng-if="day.hours == 0"></span> <!-- why it is even exist? -->
          <span ng-if="day.hours != 999 && day.hours != 0">Time for Workout!! </span>
        </td>
      </tr>
    </tbody>
  </table>

html -d和ng-if用于html td

1 个答案: