AngularJS - 在 2 行后显示横幅，然后再显示 2 行答案

【问题标题】：AngularJS - Display Banner after 2 rows, followed by another 2 RowsAngularJS - 在 2 行后显示横幅，然后再显示 2 行
【发布时间】：2016-05-04 05:32:45
【问题描述】：

我试图在 2 行 4 x "col-md-3" 之后显示横幅 <div>，然后再显示 2 行 - 所以生成的标记看起来像：

 <div class="col-md-3">1</div>
 <div class="col-md-3">2</div>
 <div class="col-md-3">3</div>
 <div class="col-md-3">4</div>
 <div class="col-md-3">5</div>
 <div class="col-md-3">6</div>
 <div class="col-md-3">7</div>
 <div class="col-md-3">8</div>
 <div class="col-md-12" id="Banner">Banner</div>
 <div class="col-md-3">9</div>
 <div class="col-md-3">10</div>
 <div class="col-md-3">11</div>
 <div class="col-md-3">12</div>
 <div class="col-md-3">13</div>
 <div class="col-md-3">14</div>
 <div class="col-md-3">15</div>
 <div class="col-md-3">16</div>

尝试使用 AngularJS 来模拟这个，所以必须使用 ng-repeat - 但似乎无法让它工作。任何帮助表示赞赏：My Plunker

  <div ng-repeat="n in Numbers">
    <div class="col-md-3">{{n}}</div>
  </div>

【问题讨论】：

标签： angularjs html twitter-bootstrap-3

【解决方案1】：

你的 plunker 有几个问题。第一个 maincontroller.js 缺少 .js 扩展名，因此永远不会加载。

接下来，所有对加载角度的引用都应该以 https 开头，而不仅仅是 http。

要在一定数量的行后显示横幅，请将其放置在第一个 div 中并使用如下内容：

<div class="col-md-12" id="Banner" ng-if="$index==5">Banner</div>

不确定 5 是否是您想要的数字，或者您是否想使用某种表达式来查看 ng-if 是否可以被某个值整除，但是使用 $index 和 ng-if 应该可以到达那里。

【讨论】：

谢谢你 - 但我怎样才能让横幅
在前 2 行之后显示？

【解决方案2】：

您可以使用 ng-repeat-start 和 ng-include 和 ng-if 来有条件地包含横幅（如果它位于正确的索引处）n===8。

请查看下面或此plunkr 中的代码。

 angular.module("app", [])
        .controller("MainController", mainController);

function mainController($scope) {

        $scope.Numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-controller="MainController" ng-app="app">
    
      <h1>Demo</h1>
      
      <div class="col-md-3" ng-repeat-start="n in Numbers">{{n}}</div>
      <div ng-include="'banner.html'" ng-if="(n === 8)" ng-repeat-end></div>
      
      <script type="text/ng-template" id="banner.html">
      <div class="col-md-12" id="Banner">Banner</div>
      </script>
  
    </div>

【讨论】：