Question

我正在创建一个Angular日历，但我遇到了一个我不理解的问题。

<!doctype html>
<html ng-app='bookerApp'>
<head>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel='stylesheet' href='css/styles.css'>
<script src='js/angular.min.js'></script>
<script src='js/controllers/BookerController.js'></script>
</head>
<body ng-controller='BookerController' ng-init='getDaysInMonth()'>    
<table >
    <tr class='booker-head'>
        <th class='day calendar {{day}}' ng-repeat='day in days'>{{day}}</th>
    </tr>
    <tr class='row' ng-repeat='row in rows'>
        <td ng-repeat='num in row track by $index' ng-class='day'>{{num}}</td>
    </tr>
  </table>

 </body>
 </html>

JS：

var app = angular.module('bookerApp', []); 

app.controller('BookerController', ['$scope', function($scope){

    $scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

    $scope.rows = [
        [ 1,  2,  3,  4,  5,  6,  7],
        [ 8,  9, 10, 11, 12, 13, 14],
        [15, 16, 17, 18, 19, 20, 21],
        [22, 23, 24, 25, 26, 27, 28],
        [29, 30, 31, '', '', '', ''],
        ['', '', '', '', '', '', '']
        ];

    $scope.currDate = new Date();
    $scope.daysInMonth = 0;
    $scope.currDay = 0;
    $scope.monthStart = 0;
    $scope.monthEnd = 0;
    $scope.dayStart = 0;
    $scope.dif = 0;

    $scope.calLayout = function(){

        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                if ($scope.rows[x][y] == 1) {
                    $scope.dif = y - $scope.monthStart.getDay();

                }
            }
        }



        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                $scope.rows[x][y] += $scope.dif;
            }
        }


        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                if ($scope.rows[x][y] <= 0){
                    $scope.rows[x][y] = '';
                }
            }
        }

        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                if (($scope.rows[x][y] - $scope.dif) == $scope.daysInMonth){
                    for (i = -($scope.dif); i > 0; i--){
                        if (y+i > 6) {
                            $scope.rows[x+1][y-7+i] = ($scope.rows[x][y]+i);
                        }
                        else {
                            $scope.rows[x][y+i] = ($scope.rows[x][y]+i);
                        }
                    }
                }
            }
        }

    }


    $scope.getDaysInMonth = function () {
        monthStart = new Date($scope.currDate.getFullYear(), $scope.currDate.getMonth(), 1);
        monthEnd = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, 1);
        $scope.monthStart = monthStart;
        $scope.monthEnd = monthEnd;
        $scope.daysInMonth = (monthEnd - monthStart)/(1000*60*60*24);
        $scope.calLayout();
    }

    $scope.getMonthStartDay = function (){
        $scope.currDay = $scope.currDate.getDate();
        return $scope.monthStart.getDay();
    }


}]);

以上代码适用于某一点，但在桌面上使用ng-repeat时，星期日＆＃39;周围有一个空列。 7天延伸到右边，总共留下8列。我在下面添加了截图。非常感谢帮助，谢谢。

Answer 1

CSS问题？

如果我不添加你的CSS，似乎是正确的。

  <!DOCTYPE html>
  <html ng-app='bookerApp'>

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
      <script src="BookerController.js"></script>
    </head>

    <body ng-controller='BookerController' ng-init='getDaysInMonth()'>    
  <table >
      <tr class='booker-head'>
          <th class='day calendar {{day}}' ng-repeat='day in days'>{{day}}</th>
      </tr>
      <tr class='row' ng-repeat='row in rows'>
          <td ng-repeat='num in row track by $index' ng-class='day'>{{num}}</td>
      </tr>
    </table>

   </body>

  </html>

https://plnkr.co/edit/IszWw9hBfr31sdRj6AXX?p=preview

角度2D数组表重复跳过列

1 个答案: