Развертывание плитки с использованием углового в ответном макете

Question

Я разрабатываю однострочное приложение с гибким макетом. Текущая страница, на которой я работаю, использует макет на основе плитки, который автоматически переносит дополнительные плитки в следующую строку. HTML ниже, и в ответном макете он может отображать 1, 2 или 3 плитки на строку в зависимости от ширины строки (она позиционирует их с помощью поплавков).

<div class="tiled_panel"> 
    <div class="tile_1">...</div> 
    <div class="tile_2">...</div> 
    <div class="tile_3">...</div> 
    <div class="tile_4">...</div> 
    <div class="tile_5">...</div> 
    ... 
</div> 

Теперь каждой плите будет дана кнопка «Узнать больше». Проект требует, чтобы блок расширял между строкой выбранной плитки и строкой ниже. Этот блок будет полной шириной строки и будет закрыт, когда пользователь закроет его или нажмет на другую кнопку Подробнее.

Моя первая мысль заключалась в том, чтобы упорядочить HTML как показано ниже, используя ng-if, чтобы скрыть или отобразить div-расширения, но я не могу понять CSS, чтобы он отображался между строками.

<div class="tiled_panel"> 
    <div class="tile_1">...</div> 
    <div class="expander_1">...</div> 
    <div class="tile_2">...</div> 
    <div class="expander_2">...</div> 
    <div class="tile_3">...</div> 
    <div class="expander_3">...</div> 
    <div class="tile_4">...</div> 
    <div class="expander_4">...</div> 
    <div class="tile_5">...</div> 
    <div class="expander_5">...</div> 
    ... 
</div> 

Моя вторая мысль, так как я использую Угловое, был каким-то образом использовать transcluding или в том числе, чтобы вставить соответствующий HTML в соответствующее место. Опять же, я не могу понять, как определить, где мне нужно вставить HTML?

Я попытался найти решения для других людей для подобных проблем, так как я решил, что это не необычное требование, но я еще не смог найти кого-либо еще, кто это делает.

Может ли кто-нибудь еще предложить, что мне нужно сделать, чтобы определить, где вставить HTML или как сгенерировать CSS? Или даже предложить другое решение, которое я еще не рассмотрел?

Answer 1

Хотя я 70% понимаю, что вы имеете в виду, я думаю, что ng-класс может просто решить, с чем вы столкнулись. Код решения выглядит следующим образом. И я установил jsfiddle.

Html выглядит так.

<div ng-app="" ng-controller="MyCtrl"> 
    <div class="tiled_panel"> 
     <div>Tile 1 <a href ng-click="change_tile(1)">More</a></div> 
     <div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div> 
     <div>Tile 2 <a href ng-click="change_tile(2)">More</a></div> 
     <div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div> 
    </div> 
</div> 

Ваш код контроллера выглядит следующим образом.

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

Css выглядит следующим образом.

.expander{ 
    visibility: hidden 
} 
.close{ 
    visibility: visible 
}