条件打开/关闭标记显示

Conditional open/close tag display

本文关键字：显示 条件      更新时间：2023-09-26

我想知道如何在angular中实现任务（在服务器端模板中非常容易），比如：

{{ 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重复中）

按模板中的过滤器分组：

解决方案的关键部分是，我们正在计算一个属性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滤波器来自角度滤波器

查看小提琴

控制器中的分组方式：

如果不想添加角度过滤器作为依赖项，可以在控制器中对元素进行分组。以下示例使用了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

我认为您需要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>

相关文章：