采用NG-重复与引导和AngularJS结构问题 [英] Structure issues using ng-repeat with Bootstrap and AngularJS

问题描述

我在建设有引导和AngularJS的应用程序。在某些时候，我有一个山坳-MD-3，上市产品的NG-重复。我的问题是，我希望能够插入崩溃到电网，但由于列自动生成的，我真的不知道该怎么做。

I'm building an app with Bootstrap and AngularJS. At some point I have an ng-repeat on a col-md-3, listing products. My problem is that I want to be able to insert a collapse into the grid, but as the columns are automatically generated, I don't really know how to do it.

下面是一个图，以更好地理解：
首先，.COL-MD-3的栅极被从纳克重复填充。

Here's a diagram to understand it better: First, the grid of .col-md-3 is populated from the ng-repeat.

和我想要实现的，是增加一个.COL-MD-12出现右侧.COL-MD-3，获取点击下排。

And what I'm trying to achieve, is to add a .col-md-12 that appears right under the row of the .col-md-3 that gets clicked on.

我最初的想法是每组4 .COL-MD-3的后动态添加一个空.COL-MD-12，但我不知道该怎么做，而且还挺似乎是，它会是一个相当沉闷的做法。任何想法？

My initial thought was to add an empty .col-md-12 dynamically after each group of 4 .col-md-3, but I wouldn't know how to do so, and it kinda seems to be that it would be a rather dull approach. Any ideas?

下面是相关的HTML：

Here's the relevant 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>

修改：这里有一个工作Plunker 包括tasseKATTs解决方案。

EDIT: Here's a working Plunker including tasseKATTs solution.

推荐答案

将一个自定义的指令，你的内在元素一起，与1和描述，如果它是最后一个元素标记启动位置计数器：

Place a custom directive on your inner element together with a position counter that starts with 1 and a marker describing if it's the last element:

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

创建一个孤立的范围指令，绑定作用域属性的位置值和最后一个属性和附加一个单击事件处理程序的元素：

Create the directive with an isolated scope, bind scope properties to the values of the position and last attributes and attach a click event handler to the element:

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

在单击处理程序首先创建崩溃元素或选择它，如果它已经存在：

In the click handler first create the collapse element or select it if it already exists:

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

基于点击的元素的计算圆的人数多达四最接近的倍数的位置

Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four:

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

获取在所计算出的位置或最后一个元件，如果位置超出范围：

Get the element at the calculated position or the last one if the position is out of range:

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

var calculatedElement = angular.element(calculatedQuery);

在计算出的位置的元素之后插入崩溃元素：

Insert the collapse element after the element at the calculated position:

calculatedElement.parent().after(collapse);

可以使用一些优化，但希望让你在正确的轨道上。

Could use some optimizations, but hopefully puts you on the right track.

演示一些额外的视觉效果： 的http：// plnkr.co/edit/fsC51vS7Ily3X3CVmxSZ?p=$p$pview

这篇关于采用NG-重复与引导和AngularJS结构问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！