2

I'm trying to do this when someone clicks a box:

enter image description here

It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.

<div ng-repeat="friend in friends" ng-click...>
 <div>
   {{friend}}
 </div>
 <div collapse="expand">
  some content
 </div>
</div>

But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).

So, I have this plunker, where the gray div is outside the ng-repeat.

Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?

I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.

Considerations:

  • A row could have one to n items.

What I have tried

  • Put the gray div with position relative, but this would not push down the other divs.
Coyolero
  • 2,353
  • 4
  • 25
  • 34
  • Maybe make this bunch of code a directive is the correct way? – rhgb Oct 01 '14 at 01:14
  • That's right, but putting it in a directive would not get the main problem, this is, avoiding the repetition of that directive by each item. – Coyolero Oct 01 '14 at 01:31
  • You need to wrap your collapse into a directive. The directive can take out the entire part out of the DOM and store it inside itself. You can then trigger it with a click, and let it be inserted on the right spot. You need to read out the DOM and do some calculation to get it inserted at the right spot, but it is well possible. – Sander Elias Oct 01 '14 at 06:01

1 Answers1

2

First of all your task is unachievable unless you change markup. The result should be like this.

<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>

For that you need to use custom filter. I took it from here how to split the ng-repeat data with three columns using bootstrap

Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.

You modified working planker is here http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview

Community
  • 1
  • 1
Sergey Romanov
  • 2,949
  • 4
  • 23
  • 38