使用 $index 在 ng-repeat 中间添加 <div> - Bootstrap 容器答案

【问题标题】：Adding <div> in middle of ng-repeat using $index - Bootsrap container使用 $index 在 ng-repeat 中间添加 <div> - Bootstrap 容器
【发布时间】：2016-09-01 11:27:47
【问题描述】：

我正在尝试使用$index== 在ng-repeat 中间输出<div> - 但是横幅<div> 在父container 内，因此它不会跨越屏幕的整个宽度。我曾尝试在横幅上使用class="container-fluid"，但它使它变得更小。有什么办法可以打破父容器（仅针对那个 div，在ng-repeat 的中间）以使横幅全宽？

这就是我希望它的外观（仅出于视觉目的，需要使用 ng-repeat 输出 div）：Plunker-1

这就是它目前的样子：Plunker-2

【问题讨论】：

具有 "container-fluid" 类的
正在产生对齐问题，因为它的放置左右边距。所以你可以删除这个类或者写自定义类来删除左右边距

标签： angularjs html twitter-bootstrap-3

【解决方案1】：

这里是解决方案：https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview

您不需要容器流体来实现您的目标。

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

               <div class="well well-sm text-center">
                  Banner

              </div>
 </div>

【讨论】：

谢谢 - 但这仍然只是父 container div 的边缘。我需要它来浏览整个页面 - 请参阅 Plunker-1
Plunker-1 和我的 plunker 都向我显示相同的结果。
@JamesP：明白你的意思。使用与 Agarwal 相同的技术，您可以这样做吗？先打印一组项目的前半部分，然后是横幅，然后是后半部分？

【解决方案2】：

你已经接近了，试试这个：

<div id="content">
  <div class="container" ng-controller="MainController">

  <h1>Hello Plunker!</h1>

    <div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
      <div class="container-fluid" id="Banner" ng-if="$index === 8">
        <div class="well well-sm text-center">
          Banner
        </div>
      </div>
      <div class="well active" ng-if="$index !== 8">
        <h3>{{item}}</h3>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

一个像this一个怎么样？

我所做的是使.well 绝对定位，这样您就可以“绕过”正常的文档流，使.banner 变得任意长，从而使用百分比值添加额外的宽度（这样您就可以调整大小时有点流畅）。

.banner{
  position: absolute;
  width: 104%;
  right: -2%;
}

因此，您的横幅会变宽，超过 100%（这是容器的宽度）。为了让它在中间，从右边减去一半的额外宽度（4% / 2 == 2%）（或者可以从左边加上 2%）。

问题在于响应能力，因为它会在某些断点处中断。我建议使用像 SASS 和 CSS3 calc()、MDN 这样的解决方案来解决这个问题。

【讨论】：

【解决方案4】：

<div ng-repeat="item in Data">
  <div class="col-md-12 well well-sm text-center" 
       id="Banner" 
       ng-if="$index==8">
    Banner
  </div>
  <div class="col-md-3">
    <div class="well active">
      <h3>{{item}}</h3>
    </div>
  </div>
</div>

【讨论】：