I'm trying to expand a DIV element on my angular layout. I'm using 
angular-masonry <https://github.com/passy/angular-masonry> to give a 
mason-style to my layout, but now I need to expand those boxes on click. 
I've tried a lot of stuff, but it kept overlapping my others elements. Soon 
I figured out that I'll have to write it the "angular way" so I don't run 
into DOM manipulation conflicts.

Here's my code:

<div class="row" masonry>

    <div 
    class="masonry-brick item-component col-sm-4 col-md-4" 
    ng-repeat="component in components.components | filter : 
components.filterByFilter | filter : searchText"
    ng-click=" // expand #expandable // "
    >

      <div class="component-wrapper">
        <div class="component">
          <img ng-src="@{{ component.thumb }}"/>
        </div>
        <div class="component">
          @{{ component.name_en }}
        </div>
      </div>

      <div id="expandable" class="expand-me codes-wrapper">
          <p>XXX</p>
          <p>YYY</p>
          <p>ZZZ</p>
      </div>


    </div>
  </div>

Here's what I'm trying accomplish using the "angular way": 
http://codepen.io/desandro/pen/daKBo

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

Reply via email to