使用ng-if的Angularjs微小显示错误

Question

我的显示逻辑有一个小错误。用户选择作业长度作为步骤1，然后单击单元格以确定可用性。一切正常但我需要选择来显示其他单元格。我认为我必须附加某种布尔值，我不确定。现在假设jobLength=3（无论如何，这来自HTML5自定义滑块，不在下面显示，但在表格上方作为步骤1）。如何显示选择。

这是代码。

  <tbody>
            <tr ng-repeat="hour in workhours" ng-init="selectedIndex=$index">
                <td>{{hour}}:00 - {{hour+1}}:00</td>

                <td class="hidden-xs" ng-class = "{ 'full'     : !entry.HoursAvailable.includes(hour),
                                                    'selected' : renderGreen(selectedIndex, $index, jobLength)}" 
                                      ng-click = "checkSlotAvailability(hour, jobLength, entry, data)"
                                      ng-repeat= "entry in data.calendar">

                        <!-- /* ============ -->
                        <!-- Display Logic   -->
                        <!-- =============== -->
                        <span ng-if="entry.HoursAvailable.includes(hour) 
                            && !renderGreen(selectedIndex, $index, jobLength) 
                            && !(selectedIndex == selectedRow 
                            && $index          == selectedColumn)">
                                Available
                        </span>

                        <span ng-if="entry.HoursAvailable.includes(hour) 
                            && renderGreen(selectedIndex, $index, jobLength)
                            && $index        == selectedColumn
                            && selectedIndex == selectedRow
                            <!-- I added this check slot f(x) to render table dynamically when user adjusts job length -->
                            && checkSlotAvailability(hour, jobLength, entry, data)">
                                Selected
                        </span>

                        <span ng-if="entry.HoursAvailable.includes(hour) 
                            && !renderGreen(selectedIndex, $index, jobLength) 
                            && selectedIndex == selectedRow 
                            && $index        == selectedColumn"> 
                                Unavailable
                        </span>

                        <span ng-if="!entry.HoursAvailable.includes(hour)">
                            Full
                        </span>

                </td>
            </tr>
        </tbody>

控制器

  (function() {

"use strict";

angular
    .module("availability")
    .controller("availabilityController", function($scope, $http){
        $scope.data          = {};
        $scope.data.response = "Available";
        $scope.workhours     =  Array.from({length:9}).map((_, i)=> i + 9); // creating all possible working hours in a day (9-17)

        $http.get('../api/availability.json')
             .then( function(response){
                $scope.data.calendar = response.data;
        }); 

        function setBuffer(date){
            var today       = formatDateToString(new Date('2016-05-18T11:27:00'));
            var bufferTime  = 1;
            if(date == today){
                bufferTime  = 2;
            }
            return bufferTime;
        }    

        function formatDateToString(date){
            var dd             = (date.getDate() < 10 ? '0' : '') + date.getDate();
            var MM             = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
            var yyyy           = date.getFullYear();
            return (yyyy + "-" + MM + "-" + dd);
        }

        function getRowAndColumn(row, column){
            $scope.selectedRow    = row;
            $scope.selectedColumn = column;
        }

        $scope.renderGreen = function(selectedIndex, $index, jobLength){
            if( $index == $scope.selectedColumn 
                && selectedIndex >= $scope.selectedRow
                && selectedIndex <= ($scope.selectedRow + jobLength - 1) && $scope.data.response == "Available")    
                return true;
            else
                return false;
        }

        /* ===========================
        Check Availabiliy function
        ============================== */
        $scope.checkSlotAvailability = function(time, jobLength, date, availability) {
            var date      = date.Date;
            var calendar  = availability.calendar;
            var response  = "";
            var buffer    = setBuffer(date);
            var selectedIndex = time - 9;



            if( jobLength < 1 || jobLength > 5 ){
                alert("Please enter job length from 1 to 5");
                response = "Available";
            }else {
                for( var i = 0; i < calendar.length; i++ ){

                    getRowAndColumn(selectedIndex, i); 

                    if( date == calendar[i].Date ){

                        if( time < 9 || time > 17 ){    // Can't book before 9am or after 5pm. Code should never reach here.
                            response = "Unavailable";
                            break;
                        }else { 
                            for( var j = 0; j < calendar[i].HoursAvailable.length; j++){

                                if( time == calendar[i].HoursAvailable[j]){
                                    if( ( time == 9 || time == 17 ) && calendar[i].HoursAvailable[j]
                                        || time - buffer < 9
                                        || time == calendar[i].HoursAvailable[j] 
                                        && time - buffer == calendar[i].HoursAvailable[j - buffer] 
                                        && time + buffer == calendar[i].HoursAvailable[j + buffer] ){

                                            for( var k = j; k < calendar[i].HoursAvailable.length; k++ ){

                                                if( time >= 13 && time == calendar[i].HoursAvailable[k] && time + jobLength <= 18 
                                                    && time - buffer   == calendar[i].HoursAvailable[k - buffer] //5pm

                                                    ||  (time + jobLength + (buffer - 1))  == calendar[i].HoursAvailable[k + jobLength + (buffer - 1)] 
                                                    &&  time - buffer                      == calendar[i].HoursAvailable[k - buffer] 

                                                    ||  (time + jobLength + (buffer - 1))  == calendar[i].HoursAvailable[k + jobLength + (buffer - 1)] ){   //9am
                                                        response = "Available";
                                                        break;

                                                }else if( k == calendar[i].HoursAvailable.length - 1 ){
                                                    response = "Unavailable";
                                                }
                                            }
                                            break;
                                    }else{
                                        response = "Unavailable";
                                        break;
                                    }

                                }else if( j == calendar[i].HoursAvailable.length - 1 ){ //no available slot
                                        response = "Full";
                                }
                            }
                            break;
                        }
                    }else if( i == calendar.length - 1 ){   //no available date
                        response = "Full";
                        break;
                    }
                }   
            }
            $scope.data.response = response;
            return response;
        };
    });

})();