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>

......等等（我正在重复）

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

在控制器中分组：

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

条件打开/关闭标签显示

2 个答案: