javascript - 在 Bootstrap 和 AngularJS 中使用 ng-repeat 的结构问题

Question

我正在使用 Bootstrap 和 AngularJS 构建一个应用程序。在某些时候，我在 col-md-3 上有一个 ng-repeat，列出产品。我的问题是我希望能够在网格中插入折叠，但由于列是自动生成的，我真的不知道该怎么做。

为了更好地理解，这里有一个图表:首先，.col-md-3 的网格由 ng-repeat 填充。

我想要实现的是添加一个 .col-md-12，它出现在被点击的 .col-md-3 行的正下方。

我最初的想法是在每组 4 个 .col-md-3 之后动态添加一个空的 .col-md-12，但我不知道该怎么做，而且看起来有点像是一种相当沉闷的方法。有什么想法吗？

这是相关的 html:

<div class="infinite" infinite-scroll="loadDetails()">
      <div class="col-xs-3 col-md-3" ng-repeat="release in main.releases | filter:main.album">
        <release release="release" artist="main.artist" class="dropdown"></release> 
      </div>
</div>

编辑:这是一个working Plunker包括 tasseKATTs 解决方案。

Answer 1

在您的内部元素上放置一个自定义指令以及一个以 1 开头的位置计数器和一个描述它是否是最后一个元素的标记:

<div ng-repeat="item in items" class="col-xs-3">
  <div class="item" the-directive position="{{ $index + 1 }}" last="{{ $last }}">
  </div>
</div>

创建具有独立范围的指令，将范围属性绑定(bind)到 position 和 last 属性的值，并将点击事件处理程序附加到元素:

app.directive('theDirective', function() {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@' },
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        ...
      });
    }
  };
});

在点击处理程序中首先创建折叠元素或选择它(如果它已经存在):

var collapseQuery = document.querySelector('#collapse');
var collapse = collapseQuery === null ?
angular.element('<div id="collapse" class="col-xs-12"><div class="twelve"></div></div>') :
angular.element(collapseQuery);

根据被点击元素的位置计算四舍五入到最接近的四的倍数:

var calculatedPosition = Math.ceil(scope.position / 4) * 4;

获取计算位置的元素，如果位置超出范围则获取最后一个元素:

var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

var calculatedElement = angular.element(calculatedQuery);

在计算位置的元素后插入折叠元素:

calculatedElement.parent().after(collapse);

可以使用一些优化，但希望能让您走上正轨。

带有一些额外视觉效果的演示: http://plnkr.co/edit/fsC51vS7Ily3X3CVmxSZ?p=preview