AngularJS -2行后显示横幅，2行后显示另外2行

Question

我试图在2行4 x"col-md-3"之后显示一个横幅"col-md-3"，然后再显示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，但似乎无法做到这一点。感谢您的任何帮助：我的柱塞

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

Answer 1

你的柱塞有几个问题。首先，maincontroller.js缺少.js扩展，因此它从未加载过。

接下来，所有对load角的引用都应该从https开始，而不是仅仅从http开始。

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

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

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

Answer 2

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

请查看下面的代码或此普鲁克尔中的代码。

​

 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>

​