伍重複和NG-如果使用的HTML TD

我收到一個JSON看起來像這樣（我沒有訪問去改變它）伍重複和NG-如果使用的HTML TD

{ 
    "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對於我從這個例子中刪除的CSS規則，導致它不是問題的一部分）。最後我想要的是一個表格，它顯示某個時間段的空字段或者表示「鍛鍊時間」的字段。這對於所有的平日都適用。

來源

2017-04-18 member2

這使得幾乎沒有任何意義。一天中如何連續存在時間？你是說每天都要用同一時間嗎？我不認爲你的目標表結構非常清晰。 –

看起來你只是在第一天迭代時間段。你想在'weekplan.days''的'ng-repeat ='D中包裝它。 – HaveSpacesuit

給我們更多關於你的CSS規則的細節。我認爲這將是解決您的問題的關鍵。 –

你有很混亂的描述，但如果在邏輯上出示您的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>

來源

2017-04-18 19:43:15 Leguest

這是一個不錯的解決方案，但它不適合我。我實際上需要td元素，因爲根據哪個ng-if是真的，td的不同css規則將適用。如果我的問題令人困惑，我很抱歉，在我把它放在這裏專注於問題之前，我從代碼中刪除了很多東西。 – member2

@ member2也許你應該修改你的CSS規則？ –

伍重複和NG-如果使用的HTML TD

回答

相關問題