有条件的打开/关闭标签显示

Question

我想知道如何以类似角度的方式实现一项任务（这在服务器端模板中非常容易）：

{{ if condition }}
    <div class="container">
{{ endif }}

    <div class="child"></div>

{{ if condition }}
    </div> <!-- closing container -->
{{ endif }}

我当然知道 ng-hide、ng-show 和 ng-hide……但它认为我不能使用这些指令来执行我的任务……那我该怎么办？

ps：我无法做到以下几点：

<div class="container" ng-if="condition">
    <div class="child"></div>
</div>
<div class="child" ng-if="!condition"></div>

因为我使用模块运算符 (%) 将“子”节点包装到每个 X 元素的“容器”中（其中 X 是动态参数）

最终结果将是（假设 X 为 4）：

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

... 等等（我在 ng-repeat 中）

Answer 1

在模板中按过滤器分组：

解决方案的关键部分是我们正在计算一个属性containerId，它取决于容器大小和数组中元素的索引：

$scope.arrayItems.forEach(function(item, index) {
    item.containerId = Math.floor(index / size);
});

然后在模板中我们通过属性containerId 对元素进行分组：

<div class="container" ng-repeat="containers in arrayItems | groupBy: 'containerId'">
    <div class="child" ng-repeat="item in containers">{{item.name}}</div>
</div>

模板中的groupBy过滤器来自angular-filter

见fiddle

---

在控制器中分组：

如果您不想添加 angular-filter 作为依赖项，您可以在控制器中对元素进行分组。下面的例子利用了lodash 的groupBy 函数：

在控制器中：

$scope.itemsGroupedByContainer = _.groupBy($scope.arrayItems, 'containerId');

在模板中：

<div class="container" ng-repeat="containers in itemsGroupedByContainer">
    <div class="child" ng-repeat="item in containers">{{item.name}}</div>
</div>

见fiddle

Answer 2

我认为您需要 ng-repeat 指令。试试这样的：

<div ng-repeat="item1 in repeat1 track by $index">

    <div ng-repeat="item2 in repeat2 track by $index"></div>

</div>

文档：https://docs.angularjs.org/api/ng/directive/ngRepeat

您不需要 if 块来添加结束 </div>