angularjs - Expanding tiles layout using Angular in responsive layout -

I am developing an angular single-page app with a responsive layout. The page I'm working on uses a tile-based layout which automatically wraps an additional tile in the next line, HTML is below and, in responsive layout, it is 1, 2 per line, depending on the width of the line , Or 3 tiles (this keeps them using floats).

  & lt; Div class = "tiled_panel" & gt; & Lt; Div class = "tile_1" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_2" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_3" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_4" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_5" & gt; ... & lt; / Div & gt; ... & lt; / Div & gt;  

Now each tile will be given the "learn more" button. Design asks for a block to expand the line of selected tiles and bottom row . This will be the full width of the block row and when the user closes it or clicks on a different click button.

My first thought was that NG-if they show hidden or expanding devices but I can not understand the CSS necessary to display it among the rows.

  & lt; Div class = "tiled_panel" & gt; & Lt; Div class = "tile_1" & gt; ... & lt; / Div & gt; & Lt; Div class = "expander_1" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_2" & gt; ... & lt; / Div & gt; & Lt; Div class = "expander_2" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_3" & gt; ... & lt; / Div & gt; & Lt; Div class = "expander_3" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_4" & gt; ... & lt; / Div & gt; & Lt; Div class = "expander_4" & gt; ... & lt; / Div & gt; & Lt; Div class = "tile_5" & gt; ... & lt; / Div & gt; & Lt; Div class = "expander_5" & gt; ... & lt; / Div & gt; ... & lt; / Div & gt;  

My second thought, ever since I was using kangaroo, was used in any way to the appropriate place to insert or include relevant HTML. Again, I can not understand how I need to put HTML?

I have tried to find around other people to solve similar problems, because I did not have this unusual need, but I have not been able to do this to anyone yet. Who is doing this.

Can anyone else suggest what to do to know how to insert HTML or how to generate CSS? Or is there a suggestion of another solution that I have not considered yet?

Although I have 70% what do you mean, I think the NG-Class can easily solve Which you have to face. The solution code is like below and I setup.

The HTML looks like this.

  & lt; Div ng-app = "" ng-controller = "myCtrl" & gt; & Lt; Div class = "tiled_panel" & gt; & Lt; Div & gt; Tile 1 & lt; A href ng-click = "change_tile (1)" & gt; More & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "expander" ng-class = "{'off': opentile === 1}" & gt; Expander 1 & lt; A href ng-click = "change_tile (-1)" & gt; Close & lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; Tile 2 & lt; A href ng-click = "change_tile (2)" & gt; More & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "expander" ng-class = "{'off': opentile === 2}" & gt; Expander 2 & lt; A href ng-click = "change_tile (-2)" & gt; Close & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Your administrator code looks like this.

  $ scope.change_tile = function (value) {$ scope.opentile = value; } $ Scope.change_tile (0);  

CSS looks like this.

 . Expander {Visibility: Hidden}. Close {visibility: view}