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或includes将相关的HTML插入适当的位置。同样，我无法弄清楚如何识别我需要插入HTML的位置？

我已经尝试过寻找其他人对类似问题的解决方案，因为我认为这不是一个不寻常的要求，但我还没有找到其他人这样做。

还有其他人可以建议我需要做些什么来确定插入HTML的位置或如何生成CSS？或者甚至建议我还没有考虑过另一种解决方案？

Answer 1

虽然我有70％了解你的意思，但我认为ng-class可以简单地解决你所面对的问题。解决方案代码如下所示。我设置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
}

在响应式布局中使用Angular扩展切片布局

1 个答案: