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

Question

I'm wondering how to implement a task (which is very easy in server-side templating) in angular like:

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

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

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

I'm of course aware of ng-hide, ng-show and ng-hide... but it think I can't use these directives to implement my task... so what should I do?

ps: I can't do the following:

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

because I'm using the module operator (%) in order to wrap "child" nodes into "container" every X element (where X is a dynamic parameter)

the final result would be (supposing X is 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>

... and so on (I'm in a ng-repeat)

Answer 1

Group by filter in the template :

The key part of the solution is that we are computing a property containerId , which depends on the container size and on the index of the element in the array :

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

Then in the template we group the elements by the property containerId :

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

That groupBy filter in the template comes from angular-filter

See fiddle

---

Group by in the controller:

In case you don't want to add angular-filter as a dependency, you could group the elements in the controller. The following example makes use of the groupBy function of lodash :

In the controller :

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

In the template :

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

See fiddle

Answer 2

I think that you need the ng-repeat directive. Try something like this:

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

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

</div>

Docs: https://docs.angularjs.org/api/ng/directive/ngRepeat

You don't need an if block to add a closing </div>