带有 JSON 嵌入式数组的 Angularjs 表

Question

我正在努力在一个简单的表（时间表）中在前端显示这个带有嵌入小时数组的 json，其中一周中的天数作为列，小时数在行中。如果小时存在（在 json 中），则在表格单元格中以绿色显示 AVAILABLE。从“星期三 18 日”到“星期二”24 日开始，跳过“星期日”。从上午 9 点到下午 5 点，一天有 9 个小时 [9,10,11,12,13,14,15,16,17]。

        $scope.data          = {};
        $scope.data.response = "AVAILABLE";
        $scope.data.calendar = [
                              {
                                "Date": "2016-05-18",
                                "HoursAvailable": [9, 10, 11, 12, 13, 14, 17]
                              },
                              {
                                "Date": "2016-05-19",
                                "HoursAvailable": [9, 10, 11, 12, 13, 14, 15, 16, 17]
                              },
                              {
                                "Date": "2016-05-20",
                                "HoursAvailable": [9, 10, 14, 15, 16, 17]
                              },
                              {
                                "Date": "2016-05-21",
                                "HoursAvailable": [9, 10, 11, 12, 13]
                              },
                              {
                                "Date": "2016-05-23",
                                "HoursAvailable": [13, 14, 15, 16]
                              },
                              {
                                "Date": "2016-05-24",
                                "HoursAvailable": [11, 12, 15, 16, 17]
                              }
                           ]; 

HTML

<table class="table">
    <thead>
        <tr>
            <th>time</th>
            <th>Wednesday 18th</th>
            <th>Thursday 19th</th>
            <th>Friday 20th</th>
            <th>Saturday 21st</th>
            <th>Monday 23rd</th>
            <th>Tuesday 24th</th>
        </tr>
    </thead>
    <tbody>

      ??

    </tbody>
</table>

Answer 1

您需要检查一下给定时间是否出现在每天的“空闲时间”列表中。它可能看起来像这样：

<tbody>
    <tr ng-repeat="hour in workhours">
        <td>Time: {{hour}}</td>
        <td ng-repeat="entry in calendar">
            {{entry.hours_free.includes(hour) ? 'FREE' : 'BUSY'}}
        </td>
    </tr>
</tbody>

其中$scope.workhours 是一个包含数字 9 到 17 的数组。在您的版本中，您需要在表格单元格中添加一个 ng-class 以检查是否包含条件并应用绿色背景。

demo