在 Bootstrap 和 AngularJS 中使用 ng-repeat 的结构问题 [英] Structure issues using ng-repeat with Bootstrap and AngularJS

问题描述

我正在使用 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="col-xs-3 col-md-3" ng-repeat="release in main.releases | filter:main.album"><release release="release" Artist="main.artist" class="dropdown"></release>

编辑:这是一个工作Plunker，包括tasseKATTs解决方案.

解决方案

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

<div class="item" the-directive position="{{ $index + 1 }}" last="{{ $last }}">

创建具有独立作用域的指令，将作用域属性绑定到 position 和 last 属性的值，并将单击事件处理程序附加到元素:

app.directive('theDirective', function() {返回 {限制:'A'，范围:{位置:'@'，最后一个:'@'}，链接:函数(范围，元素，属性){element.bind('点击', function() {...});}};});

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

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

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

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

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

varcalculatedQuery = document.querySelector('[position="' + calculatePosition + '"]');if (calculatedQuery === null)calculatedQuery = document.querySelector('[last="true"]');;varcalculatedElement = angular.element(calculatedQuery);

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

calculatedElement.parent().after(collapse);

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

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

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.

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

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.

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?

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>

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

解决方案

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.

Demo with some extra visuals: http://plnkr.co/edit/fsC51vS7Ily3X3CVmxSZ?p=preview

这篇关于在 Bootstrap 和 AngularJS 中使用 ng-repeat 的结构问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！