AngularJS с MVC и веб-API - проблема повторения - PullRequest
Новая
       9

AngularJS с MVC и веб-API - проблема повторения

0 голосов
/ 17 сентября 2018

Я делаю учебник, который имеет страницу, которая отображает изображения. Изображения являются местами полета. Либо зеленый для забронированных, либо красный для доступных.

2 вещи:

1.) Я не понимаю, как объединяются 2 массива для отображения в html. 2.) Забронированные места зеленого цвета установлены неправильно. Они смещены на 1. Таким образом, если место 3 забронировано (не доступно), оно должно быть зеленого цвета, а место 4 - показывая как зеленый. Как это исправить?

Здесь снимок экрана. Показывает список забронированных мест с номером места. Все они смещены на 1 в массиве изображений.

enter image description here

Вот booking.html, который отображается при выборе пункта меню. 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
        <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">           
        <title></title>
    </head>

    <body ng-app="routingApp" class="container">
        <div ng-controller="BookingController" align="center">        
            <br />
            <div>
               <b>UserName:</b>   <input type="text" ng-model="UserName" style="background-color:yellow" ng-blur="ValidateUser(UserName)" ng-click="RemoveTag()"/>
               <span ng-show="checkuser" style="color:green" > 
                 <br />                
                 <b>You have already booked your seat in SlotNo: {{SlotDetail}}</b>
               </span>
            </div>
            <br />
            <br />

            <!-- Calls the function for displaying the seats - images. -->
            <!-- If hovered, calls a function for displaying a modal popup. Here, I can delete the booking. -->
            <!-- If clicked, calls a function for booking a seat (insert) for the given User. -->
            <div class = "panel-body" >
                <div ng-init="DisplayingImages()" >
                    <span ng-repeat="image in images track by $index">
                        <!-- If the seat is in the array of booked seats, then his/her details will be shown in the modal. -->
                        <span ng-if="(bookcollscope).indexOf($index) != -1" >
                            <img id="{{$index}}" ng-src="{{imageUrlBooked}}" ng-mouseover="showOptionDetails($index)"/>
                            {{$index+1}}
                        </span>

                        <!-- If the seat is NOT in the array of booked seats, then he/she can be booked a seat. -->
                        <span ng-if="(bookcollscope).indexOf($index) == -1">
                            <img id="{{$index}}" ng-src="{{imageUrlNotBooked}}" ng-click="BookMySeat(UserName,$index)" />
                            {{$index+1}}
                        </span>

                        <!-- CONCERN: what does this do? -->
                        <div ng-if="($index + 1) % 5 == 0">
                            <br></br>
                        </div>
                    </span>
                </div>
            </div>
        </div>

        <dotnetpiper-directive></dotnetpiper-directive>
    </body>
</html>

Вот функция AngularJS, вызываемая из booking.html. Он вызывает хранимую процедуру, которая возвращает номера забронированных мест: 13, 26, 3, 9, 8, 14. Они становятся позициями в массиве, используемом в html. 

        dataService.GetBookedSeatsForDisplayingImages(slotNum).success(function (result) {
            $scope.bookedSeatList = result;
          
            // Set the total seats red. totalseat is set to 30.
            var imageCollection = new Array(totalseat);
            $scope.images = imageCollection;

            $scope.imageUrlNotBooked = "../Images/RED.jpg";
            
            // Sets it to a list of the curently booked seats.
            $scope.bookcollscope = $scope.bookedSeatList;                        
            console.log($scope.bookcollscope);

            // There currently is 6 booked seats (13, 26, 3, 9, 8, 14).
            var imageCollection1 = new Array($scope.bookedSeatList);
            $scope.images1 = imageCollection1;

            $scope.imageUrlBooked = "../Images/GREEN.jpg";
        }).error(function (result) {
            $scope.error = true;
        });
    }

1 Ответ

0 голосов
/ 17 сентября 2018

"1.) Я не понимаю, как объединяются 2 массива для отображения в html."

Есть два массива, images и bookcollscope. Массив images содержит список чисел от 0 до 29, я полагаю, каждое число представляет место, а массив bookcollscope содержит все номера мест, которые уже забронированы. По сути, два массива на самом деле не объединяются, вместо этого при ng-repeat отображается место для каждого элемента в массиве images с этой строкой кода: <span ng-repeat="image in images track by $index"> Теперь с помощью bookcollscope проверяется, печатать ли красное или зеленое место. Если в bookcollscope существует массив $index из images, это означает, что место забронировано, поэтому отображается зеленое место, в противном случае отображается красное место.

"Они смещены на 1. Поэтому, если место 3 забронировано (недоступно), оно должно быть зеленого цвета, а место 4 отображается зеленым. Как это исправить?"

Проблема смещения возникает из-за того, что первый элемент в массиве images равен 0, я полагаю, чтобы исправить это изменение на: <span ng-if="(bookcollscope).indexOf($index) != -1 && $index != 0"> в обоих внутренних диапазонах. 

<!-- CONCERN: what does this do? -->
<div ng-if="($index + 1) % 5
    <br></br>
</div>

Приведенное выше условие заключается в добавлении разрывов строк, если отображается 5 мест.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...