ン・リピートとNG-場合のHTML TD

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で表を作成します。この表には、ユーザーが特定の日にどのような作業を行っているかが表示されます。 （私は名前weekplanとスコープ変数にJSONデータを保存します。）

<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-trueの場合、決して両方にすることができます。 問題は列を正しく表示することです。この表の例は、timeカラムとmondayカラムに対してのみ有効です。しかし、私はすべての平日に動作するようにする方法を知りません。私は同じtdオブジェクトでng-ifとng-repeatを使うことを考えましたが、実際にはうまくいきませんでした。 （私はこの例から取り除いたCSSルールのためにng-ifの両方が必要ですが、問題の一部ではありません）。私が最後に望むのは、ある時間枠の空のフィールドか、 "Workoutのための時間"というフィールドを示すテーブルです。そして平日はこれがすべてです。

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>