0
角度カレンダーを作成中ですが、理解できない問題が発生しました。角度2D配列表の列のスキップを繰り返す
<!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リピートを使用した場合、「日曜日」の下の空の列が右に拡張7日であります私には合計で8柱が残っています。私は以下のスクリーンショットを追加しました。助けていただければ幸いです。ありがとうございます。
私は私のStyles.cssをを取り出したときに、同じ問題が起こります。ブートストラップとのやり取りに問題があるかもしれませんか？編集：それは問題を引き起こしているブートストラップが表示されます。どのように私はこれを無効にすることができますか？ – MoSheikh
あなたはplnkrを作ることができますか？ –