在响应布局中使用Angular扩展平铺布局

Question

我正在开发一个具有响应布局的Angular单页应用程序。我正在处理的当前页面使用了一个基于平铺的布局，该布局将额外的平铺自动包装到下一行。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>

现在，每个互动程序都会有一个"了解更多"按钮。该设计要求一个块在所选磁贴的行和下方的行之间展开。此块将是行的全宽，当用户关闭它或单击其他"了解更多信息"按钮时，它将被关闭。

我的第一个想法是使用ng-if将HTML排列如下，以隐藏或显示扩展器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>

由于我使用Angular，我的第二个想法是以某种方式使用transcluding或include将相关的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
}