Question

我正在尝试在2行4 x <div>之后显示横幅"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 - 但似乎无法使其正常工作。任何帮助表示感谢：My Plunker

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

Answer 1

你的掠夺者只有几个问题。第一个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可以让您到达那里。

Answer 2

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

请查看下面的代码或plunkr。

＆＃13;

 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];
}

＆＃13;

<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>

＆＃13;

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

2 个答案: