Question

我正努力在一个简单的表格（时间表）中显示这个带有嵌入式小时数组的json，每周几天作为列和小时的行。如果小时存在（在json中），则在表格单元格中显示带绿色的AVAILABLE。从＆＃34;星期三18日开始＆＃34;到周二＆＃34;第24次跳过＆＃34;星期天＆＃34;。从上午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

您需要进行一些检查，以确定每天是否有一个小时的免费时间＆＃34;名单。它可能看起来像这样：

<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

带有JSON嵌入式数组的Angularjs表

1 个答案: