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

Question

我想知道如何以 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-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

---

Controller 中的分组依据:

如果您不想添加 angular-filter 作为依赖项，您可以将 Controller 中的元素分组。以下示例使用了 lodash 的 groupBy 函数:

在 Controller 中:

$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