ng-if和$ index減1

Question

我正在嘗試顯示時間表，我想在一周內每組比賽之后創建一個休息時間。 例如，我希望在第1周的前五場比賽之后輸入<hr> ，然后在第2周的五場比賽之后再次輸入<hr> ，現在我包括的是前六場比賽，然后是每五場比賽。 為什么？ 我需要做些什么才能每隔五分鍾休息一下？

注意：作為一項額外的增強功能，最好在星期更改時休息一下，而不僅僅是假設每周有五場比賽。 如果有人也有辦法解決這個問題，那就太好了。

如下所示，顯示了前六場比賽，其中錯誤地包括了第二周的第一場比賽。

這是在我的HTML中：

<div ng-repeat="match in state.eastSchedule.Matches">
        <div class="row">
            <div class="col-xs-1 text-center">{{match.WeekNumber}}</div>
            <div class="col-xs-2">{{match.AwayPlayer}}</div>
            <div class="col-xs-2">{{match.HomePlayer}}</div>
            <div class="col-xs-2">{{match.Score}}</div>
        </div>
        <hr ng-if="$index > 0 && $index % 5 == 0" style="border-color:black;" />
    </div>

我也嘗試刪除僅使用索引> 0的部分，但在第一個匹配項之后休息一下，然后每隔5個休息一下。

<hr ng-if="$index > 0 && $index % 5 == 0" style="border-color:black;" />

Answer 1

HTML的結構使得<div class="row">出現在<hr>標記之前。

因此，在循環的第6次迭代中（第二周，當$index為5時），它在第二周的第一項打印<div class="row"> ，然后是<hr> 。

要解決此問題，可以將<hr>標記移到<div class="row">上方。

Answer 2

嘗試這個，

 var app = angular.module('plunker', []); app.controller('MainController', function($scope) { $scope.arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script> <script src="app.js"></script> </head> <body ng-app="plunker" > <div ng-controller="MainController"> <div ng-repeat="item in arr"> {{item}} <hr ng-if="(($index+1) % 5) == 0"> </div> </div> </body> </html>

Answer 3

$ index以0開頭。因此，在第一種情況下，您要打印6個值，即index 0 1 2 3 45。此后它會像接下來的5一樣工作正常。

ng-if和$ index減1

問題描述

3 個解決方案

解決方案1
2 已采納 2016-07-30 18:54:16

解決方案2
0 2016-07-30 18:43:06

解決方案3
0 2016-07-30 18:47:56

ng-if和$ index減1

問題描述

3 個解決方案

解決方案1 2 已采納 2016-07-30 18:54:16

解決方案2 0 2016-07-30 18:43:06

解決方案3 0 2016-07-30 18:47:56

解決方案1
2 已采納 2016-07-30 18:54:16

解決方案2
0 2016-07-30 18:43:06

解決方案3
0 2016-07-30 18:47:56