нг-если и $ индекс на 1

0

Я пытаюсь показать расписание, и я хочу создать перерыв после каждой группы матчей в течение недели. Например, я хочу <hr> после первых пяти матчей на первой неделе. Затем снова после пяти матчей недели 2. В то, что у меня теперь есть первые шесть матчей, а затем каждые пять после этого. Зачем? Что мне нужно сделать, чтобы прорваться через каждые пять?

Примечание. В качестве дополнительного улучшения было бы неплохо сломаться, когда неделя изменится, а не просто предположить, что будет пять матчей каждую неделю. Если у кого-то есть способ решить это, это будет здорово.

Как вы можете видеть ниже, первые шесть матчей показывают, что неправильно включает первый матч второй недели.

Изображение 174551

Это в моем 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, но затем я получаю разрыв после первого совпадения, а затем каждые пять после этого.

<hr ng-if="$index > 0 && $index % 5 == 0" style="border-color:black;" />
  • 0
    Может быть, вы просто хотите поместить этот <hr> над <div class='row'> ... b / c, когда 6-я итерация начинается (когда $index равен 5), она выведет строку div, а затем hr.
  • 0
    Это сработало. Если вы хотите опубликовать это как ответ, я приму. Спасибо!
Теги:

3 ответа

2
Лучший ответ

HTML структурирован так, что перед <hr> появляется <div class="row">.

Итак, на 6-й итерации цикла (вторая неделя, когда $index равно 5), он печатает <div class="row"> для первого элемента на второй неделе, а затем <hr>.

Чтобы исправить это, вы можете переместить <hr> так, чтобы он был выше <div class="row">.

Поделиться
0

Попробуй это,

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="[email protected]"></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>
Поделиться
0

$ index начинается с 0. поэтому в первом случае вы печатаете 6 значений, т.е. индекс 0 1 2 3 4 5. после этого он будет работать нормально, как и для последующих 5.

Поделиться
  • 0
    использовать ($ index + 1)% 5 == 0

Ещё вопросы

Сообщество Overcoder
Наверх
Меню