javascript - Angular 日历逻辑问题(+Plunker 帮助)-6ren

javascript - Angular 日历逻辑问题(+Plunker 帮助)

转载作者：行者123 更新时间：2023-12-03 06:43:28

我一直在尝试获得有关日历逻辑的帮助，因此一次只能从表格中选择一个单元格，但这里的 Plunker: http://plnkr.co/edit/F0MIoZIQ3pkhuDgcH2wo?p=info似乎不起作用。非常感谢您的建议 - 我已经在这个问题上坚持太久了!

JS:

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

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

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

    $scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    $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.times = [];
    $scope.timeDate = new Date(1970, 1, 1, 0, 0, 0, 0);

    $scope.test;
    $scope.isChanged = [];
    $scope.lastChanged = '';
    $scope.isAnyActive = false;
    $scope.rowsArray = [''];

    $scope.idCount = 0;
    $scope.idNum = [[0,0],[0,0]];


    for (x=0; x<$scope.rows.length; x++){
        $scope.idNum[x] = [];
        for (y=0; y<$scope.rows[x].length; y++) {
            $scope.idNum[x][y] = $scope.idCount;
            $scope.isChanged[$scope.idCount] = false;
            $scope.idCount += 1;

        }
    }

    $scope.checkIs = function (id) {

            if ($scope.isChanged[id] == false && $scope.isAnyActive == false) {
                $scope.isChanged[id] = true;
                $scope.isAnyActive = true;
                $scope.lastChanged = id;
            }
            else if ($scope.isChanged[id] == true && $scope.isAnyActive == true){
                $scope.isChanged[id] = false;
                $scope.isAnyActive = false;
                $scope.lastChanged = '';
            }
            else if ($scope.isChanged[id] == false && $scope.isAnyActive == true) {
                $scope.isChanged[id] = true;
                $scope.isChanged[lastChanged] = false;
            }


    }

    $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.idCount2 = 0;
        for (x=0; x<$scope.rows.length; x++){
            for(y=0; y<$scope.rows[x].length; y++){
                $scope.rowsArray[$scope.idCount2] = $scope.rows[x][y];
                $scope.idCount2 += 1;
            }
        }
    }


    $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();
    }

    $scope.setActive = function(num) {
        $scope.activated = num;
    }

    $scope.isActive = function(num) {
        /*Insert if statement to disallow empty cells from being selected*/; 
        return $scope.activated === num;
    }

    $scope.nextMonth = function (){
        $scope.resetRows();
        $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, $scope.currDate.getDate());
        $scope.getDaysInMonth();
        $scope.getTimeList();
    }

    $scope.lastMonth = function (){
        $scope.resetRows();
        $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()-1, $scope.currDate.getDate());
        $scope.getDaysInMonth();
    }

    $scope.isThisMonth = function (){
        var now = new Date;
        if ($scope.currDate.getMonth() == now.getMonth() && $scope.currDate.getFullYear() == now.getFullYear()){
            return false;
        } 
        else {
            return true;
        }
    }



    $scope.rowIsNotEmpty = function () {

        for (x=0; x<$scope.rows.length; x++) {

            var rowCount = 0;

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

            if (rowCount == rows[x].length){
                return false;
            }

        }
    }

    $scope.resetRows = function (){

        $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.getTimeList = function() {


        for (i=0; i < 48; i++) {
            $scope.times[i] = ($scope.timeDate.getTime())/(60*1000);
            $scope.timeDate += (30* 60* 1000);

        }
    }


}]);

HTML:

<!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()'>   
<div class='cal-top'>
    {{months[currDate.getMonth()]}}<br>
    {{currDate.getFullYear()}}
</div>
<table >
    <tr class='booker-head'>
        <th ng-repeat='day in days'>{{day}}</th>
    </tr>
    <tr ng-repeat='row in rows' ng-hide='rowIsNotEmpty()'>
        <td 
            ng-repeat='num in row track by $index' id='{{idNum[$parent.$index][$index]}}' 
            ng-click='checkIs(idNum[$parent.$index][$index])' ng-class='{active: isChanged[idNum[$parent.$index][$index]] && num}' 
            ng-hide='$parent.$index != 0 && !num'>{{num}}
        </td>
    </tr>
</table>

<button type='button' ng-click='lastMonth()' ng-show='isThisMonth()'><!--ShowIf-->Last Month</button>
<button type='button' ng-click='nextMonth()'>Next Month</button>


</body>
</html>

<pre>
    id: {{idNum}}
    isChanged: {{isChanged}}
    isAnyActive: {{isAnyActive}}
    rows: {{rows}}
    rowsArray: {{rowsArray}}
    lastChanged: {{lastChanged}}

</pre>

CSS:

table {
margin: 0 auto;
}

th {
background-color: rgb(51,102,154);
color: white;
text-align: center;
}

tr, td {
text-align: center;
border: 1px solid black;
width: 100px;
height: 70px;
}

td:hover {
background-color: rgb(51, 102, 154);
color: white;
} 

.active {
background-color: black;
color: white;
}

.cal-top {
background-color: rgb(51, 102, 154);
margin: 20px auto 0;
width: 701px;
text-align: center;
font-size: 4em;
color: white;
font-weight: 700;
border: solid 1px black;
border-bottom: none;
}

最佳答案

您好，请检查我在点击中添加的一次条件，因此现在只能选择一个日期

for (x=0; x<$scope.isChanged.length; x++){
                      if(x == id)
                      {
                            $scope.isChanged[x] = true;
                                $scope.isChanged[x] = true;
                      }
                      else
                      {
                            $scope.isChanged[x] = false;
                                $scope.isChanged[x] = false;
                      }

        }

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div class='cal-top'>
        {{months[currDate.getMonth()]}}<br>
        {{currDate.getFullYear()}}
    </div>
    <table >
        <tr class='booker-head'>
            <th ng-repeat='day in days'>{{day}}</th>
        </tr>
        <tr ng-repeat='row in rows' >
            <td 
                ng-repeat='num in row ' id='{{idNum[$parent.$index][$index]}}' 
                ng-click='checkIs(idNum[$parent.$index][$index])' ng-class='{active: isChanged[idNum[$parent.$index][$index]] && num}' 
                ng-hide='$parent.$index != 0 && !num'>{{num}}
            </td>
        </tr>
    </table>

    <button type='button' ng-click='lastMonth()' ng-show='isThisMonth()'><!--ShowIf-->Last Month</button>
    <button type='button' ng-click='nextMonth()'>Next Month</button>


<pre>
        id: {{idNum}}
        isChanged: {{isChanged}}
        isAnyActive: {{isAnyActive}}
        rows: {{rows}}
        rowsArray: {{rowsArray}}
        lastChanged: {{lastChanged}}
        </pre>
  </body>

</html>

和JS

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

app.controller('MainCtrl', function($scope) {
    $scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

        $scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        $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.times = [];
        $scope.timeDate = new Date(1970, 1, 1, 0, 0, 0, 0);

        $scope.test;
        $scope.isChanged = [];
        $scope.lastChanged = '';
        $scope.isAnyActive = false;
        $scope.rowsArray = [''];

        $scope.idCount = 0;
        $scope.idNum = [[0,0],[0,0]];


        for (x=0; x<$scope.rows.length; x++){
            $scope.idNum[x] = [];
            for (y=0; y<$scope.rows[x].length; y++) {
                $scope.idNum[x][y] = $scope.idCount;
                $scope.isChanged[$scope.idCount] = false;
                $scope.idCount += 1;

            }
        }

        $scope.checkIs = function (id) {

                if ($scope.isChanged[id] == false && $scope.isAnyActive == false) {
                    $scope.isChanged[id] = true;
                    $scope.isAnyActive = true;
                }
                else if ($scope.isChanged[id] == true && $scope.isAnyActive == true){
                    $scope.isChanged[id] = false;
                    $scope.isAnyActive = false;
                }
                else if ($scope.isChanged[id] == false && $scope.isAnyActive == true) {
                    $scope.isChanged[id] = true;
                }
                else
                {
                  $scope.isChanged = false;
                }
                    for (x=0; x<$scope.isChanged.length; x++){
                      if(x == id)
                      {
                            $scope.isChanged[x] = true;
                                $scope.isChanged[x] = true;
                      }
                      else
                      {
                            $scope.isChanged[x] = false;
                                $scope.isChanged[x] = false;
                      }

        }


        }

        $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.idCount2 = 0;
            for (x=0; x<$scope.rows.length; x++){
                for(y=0; y<$scope.rows[x].length; y++){
                    $scope.rowsArray[$scope.idCount2] = $scope.rows[x][y];
                    $scope.idCount2 += 1;
                }
            }
        }


        $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();
        }

        $scope.setActive = function(num) {
            $scope.activated = num;
        }

        $scope.isActive = function(num) {
            /*Insert if statement to disallow empty cells from being selected*/; 
            return $scope.activated === num;
        }

        $scope.nextMonth = function (){
            $scope.resetRows();
            $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()+1, $scope.currDate.getDate());
            $scope.getDaysInMonth();
            $scope.getTimeList();
        }

        $scope.lastMonth = function (){
            $scope.resetRows();
            $scope.currDate = new Date ($scope.currDate.getFullYear(), $scope.currDate.getMonth()-1, $scope.currDate.getDate());
            $scope.getDaysInMonth();
        }

        $scope.isThisMonth = function (){
            var now = new Date;
            if ($scope.currDate.getMonth() == now.getMonth() && $scope.currDate.getFullYear() == now.getFullYear()){
                return false;
            } 
            else {
                return true;
            }
        }



        $scope.rowIsNotEmpty = function () {

            for (x=0; x<$scope.rows.length; x++) {

                var rowCount = 0;

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

                if (rowCount == rows[x].length){
                    return false;
                }

            }
        }

        $scope.resetRows = function (){

            $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, '', '', '', ''],
                ['', '', '', '', '', '', '']
                ];

        }
});

和CSS

/* 把你的 CSS 放在这里 */

table {
margin: 0 auto;
}

th {
background-color: rgb(51,102,154);
color: white;
text-align: center;
}

tr, td {
text-align: center;
border: 1px solid black;
width: 100px;
height: 70px;
}

td:hover {
background-color: rgb(51, 102, 154);
color: white;
} 

.active {
background-color: black;
color: white;
}

.cal-top {
background-color: rgb(51, 102, 154);
margin: 20px auto 0;
width: 701px;
text-align: center;
font-size: 4em;
color: white;
font-weight: 700;
border: solid 1px black;
border-bottom: none;
}

供引用https://plnkr.co/edit/zGuDSuqdRiYsWB2ZKlgO?p=preview

关于javascript - Angular 日历逻辑问题(+Plunker 帮助)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37848651/

文章推荐： javascript - 为什么我的 PhantomJS 脚本挂起？

文章推荐： angularjs - 将部分 View 加载到主视图 AngularJS

文章推荐： assembly - TASM 1.4 - 显示特定颜色的字符串？

文章推荐： javascript - Angularjs 将服务注入(inject)指令中

帮助! float
我有这个问题: 我们声称对 float 使用相等测试是不安全的，因为算术运算会引入舍入错误，这意味着两个应该相等的数字实际上并不相等。对于这个程序，您应该选择一个数字 N，并编写一个程序来显示 1
Javascript++ -- 帮助
为什么这个脚本的输出是 5 而不是 8 ？我认为 -- 意味着 -1 两次。 var x = 0; var y = 10; while ( x
vb6 - 帮助 ffmpeg
我现在可以从 cmd 窗口中执行的 FFmpeg 过程中读取最后一行。使用脚本主机模型对象引用此源。 Private Sub Command1_Click() Dim oExec
Excel vlookup 帮助
使用 vlookup，当匹配发生时，我想从匹配发生的同一行显示工作表 2 中 C 列的值。我想出的公式从 C 列表 2 中获取值，但它从公式粘贴在表 3 上的行中获取，而不是从匹配发生的位置获取。这
WCF 跟踪日志分析 - 帮助
我在破译 WCF 跟踪文件时遇到了问题，我希望有人能帮助我确定管道中的哪个位置发生了延迟。 “Processing Message XX”的跟踪如下所示，在事件边界和传输到“Process Actio
带有条件连接查询的 Hibernate 帮助
我有四个表，USER、CONTACT、CONACT_TYPE 和 USER_CONTACT USER_CONTACT 存储用户具有填充虚拟数据的表的所有联系人如下用户表 USER_ID(int)|
php 帮助 - 实例化函数
以下有什么作用？ public static function find_by_sql($sql="") { global $database; $result_set = $data
Javabat 帮助 : alarmClock
我正在解决 JavaBat 问题并且对我的逻辑感到困惑。这是任务: Given a day of the week encoded as 0=Sun, 1=Mon, 2=Tue, ...6=Sat,
Scala "match"帮助
我正在研究一些 Scala 代码，发现这种方法让我感到困惑。在匹配语句中，sublist@ 是什么？构造？它包含什么样的值(value)？当我打印它时，它与 tail 没有区别，但如果我用尾部替换它，
iphone - 缩放图像非常慢 - 帮助
我正在使用以下代码自行缩放图像。代码很好，图像缩放也没有问题。 UIImage *originImg = img; size = newSize; if (originImg.size.width >
iphone - 帮助!仪器无法启动
Instruments 无法在我的 iPad 和 iPhone 上启动。两者都已正确配置，我可以毫无问题地从 xcode 调试它们上的代码，但 Instruments 无法启动。我听到的只是一声嘟嘟
iphone - NSRegularExpression 帮助
我想用 iPhone 的 NSRegularExpression 类解析此文本: Uploaded652.81 GB 用于摘录上传和652.81文本。最佳答案虽然我确实认为 xml 解析器更适合解
下拉过滤器的 Javascript 帮助
我找到了 solution在 Stackoverflow 上，根据过滤器显示 HTML“li”元素(请参阅附件)。本质上基于 HTML 元素中定义的 css 类，它填充您可以从中选择的下拉列表。我想
SQL FOR XML 帮助
这是一个简单的问题，但我是在 SQL 2005 中形成 XML 的新手，但是用于形成如下所示表中的 XML 的最佳 FOR XML SQL 语句是什么？ Column1 Column2 -
Flash 文件比它在网站中的背景声音加载得多!帮助
我在 www.enigmafest.com 有一个网站!您可以尝试打开它!我面临的问题是，在预加载器完成后，主页会出现，但其他菜单仍然需要很长时间才能加载，而且声音也至少需要 5 分钟! :( 我怎样
Haskell Curl 帮助
好吧，我正在尝试用 Haskell 来理解 IO，我想我应该编写一个处理网页的简短小应用程序来完成它。我被绊倒的代码片段是(向 bobince 表示歉意，但公平地说，我并不想在这里解析 HTML，只是
javascript - 谷歌浏览器背景页建议/帮助
如何使用背景页面来突出显示网站上的某个关键字，无论网站是什么(谷歌浏览器扩展)？没有弹出窗口或任何东西，它只是在某人正在查看的网站上编辑关键字。我以前见过这样的，就是不明白怎么做!谢谢你的帮助。最佳
JavaScript 帮助、表格和单选按钮
我是 Javascript 新手，需要一些帮助。先看图片: . 积分预测器应用程序。基本上当用户通过单选按钮选择获胜团队时它应该在积分栏中为获胜队添加 10 分，并且并根据得分高的球队自动对表格进
javascript - 从电子邮件到灯箱 - 帮助!
这是我的情况 - 我要发送一份时事通讯，我试图做的是，当用户单击电子邮件中的链接时，它会重定向到我的网页，然后会弹出一个灯箱，显示视频。我无法在页面加载时触发灯箱，因为您可以在查看灯箱之前转到同一页面
Javascript 帮助，获取输入
我有这个代码。 ¿Cuanto es ? Ir 我想获取用户输入的“验证码”值。我尝试这个但行不通。有什么帮助吗？ var campo = d

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angular 日历逻辑问题(+Plunker 帮助)