Question

我正在尝试显示一个时间表，我希望在一周内的每组比赛后创建一个休息时间。例如，我希望在第1周的前五场比赛之后获得<hr>。然后在第2周的五场比赛之后再次。我现在拥有的包括前六场比赛，之后每五场比赛。为什么？每隔五天我需要做些什么来打破？

注意：作为一个额外的增强功能，当周变化时，最好还是打破，而不是假设每周会有五场比赛。如果有人有办法解决这个问题，那就太好了。

如下所示，前六场比赛显示，错误地包括第二周的第一场比赛。

这是我的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>

我还尝试仅使用索引＆gt;删除部分。 0，但是在第一场比赛结束后我休息了一段时间，之后每隔五场比赛就休息一下。

<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>。< / p>

要解决此问题，您可以移动<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个值，即索引0 1 2 3 4 5.之后它会正常工作，就像接下来的5个。

ng-if和$ index关闭1

3 个答案: