AngularJS 与 MVC 和 web api - ng-repeat 问题答案

【问题标题】：AngularJS with MVC and web api - ng-repeat issueAngularJS 与 MVC 和 web api - ng-repeat 问题
【发布时间】：2019-02-20 21:41:59
【问题描述】：

我正在做一个教程，其中有一个显示图像的页面。图片是飞机座位。绿色表示已预订或红色表示可用。

两件事：

1.) 我不明白这 2 个数组是如何合并以显示在 html 中的。 2.) 绿色的预订座位设置不正确。它们偏移 1。因此，如果座位 3 已预订（不可用），它应该是绿色的，但座位 4 是显示为绿色。我该如何解决？

这里是屏幕截图。它显示带有座位号的预订座位列表。它们在图像数组中都偏移了 1。

这是在选择菜单项时显示的 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>

这里是从 booking.html 调用的 AngularJS 函数。它调用一个存储过程，返回预订的座位号：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;
        });
    }

【问题讨论】：

好的..我又看了一遍。我看到了我的困惑的一部分。 2行； var imageCollection1 = new Array($scope.bookedSeatList);和 $scope.images1 = imageCollection1;真的没有生意在那里，也没有被使用。他们在一定程度上让我误以为 $scope.images 和 $scope.images1 被合并为 1 并在 ng-repeat="image in images track by $index" 中使用。我在想图像反映了这两种情况。
我现在明白它只使用图像和 bookcollscope 数组以及从零开始的索引。我尝试了将 && $index != 0 添加到两个内部跨度的建议。但是，座位现在从 2 开始，仅显示 29（我放弃了 30 的值），并且座位编号仍然不能反映正确的座位。数字 4 仍然是绿色，而应该是绿色。这是由于 {{$index + 1}}。因此，如果我将其更改为 {{$index}}，座位现在从 1 开始，座位编号和颜色现在可以正确反映，但我失去了第 30 个座位。它被标记为 1 到 29。
现在可以使用了。我将跨度恢复到原始状态 - 没有'&& $index！= 0'。相反，我在 4 个只有 '$index' 的地方添加了 '$index + 1'。这些不包括已经有 '$index + 1' 的 2 个标签区域。结果：座位号从 1 开始，座位正确识别预订座位（绿色），我保留第 30 个座位。
将新发现编入帖子编辑可能会做得更好。如果不出意外，一般来说它更容易阅读，但您也可以阻止代码 sn-ps。

标签： angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

“1.）我不明白这2个数组是如何合并显示在html中的。”

有两个数组，images 和 bookcollscope。 images 数组包含一个从 0 到 29 的数字列表，我假设每个数字代表一个座位，bookcollscope 数组包含所有已预订的座位号。基本上这两个数组并没有真正合并，而是使用ng-repeat 为images 数组中的每个元素显示一个座位，并使用以下代码行：<span ng-repeat="image in images track by $index"> 现在在bookcollscope 的帮助下检查是否打印红色座位或绿色座位。如果images数组中的$index存在于bookcollscope中，则表示座位已预订，所以显示绿色座位，否则显示红色座位。

“它们偏移 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个座位的情况下添加换行符。

【讨论】：