Only show open div with angular if

Question

I am trying to do the same behavior as spring code:

<c:forEach items="${data}" var="data" varStatus="contador">
    <c:if test="${(contador.count-1)%3==0}">
        <div class="conjunto-${conjunto} row"> <!-- Show opening div -->
    </c:if>

        <!-- Some HTML goes here -->

     <c:if test="${((contador.count-1)%3==2)}">
         </div>
    </c:if>
</c:forEach>

Explanation: I want a new div from the class rowonly after adding three other HTML elements. I tried this with ng-iffor example:

<div ng-repeat="data in DATA">
    <div class="conjunto-{{$index/3}} row" ng-show="$index % 3 == 0" ng-include="'html.html'">
    </div>

    <div ng-show="$index % 3 != 0" ng-include="'html.html'">
    </div>
</div>

But it obviously does not work, because only one element is inside div.row.

Is there an if clause from which I could add only the opening div and then close it later?

Thanks in advance.

Answer 1

Ok, the best way to do this is IMO 2 times, there is a method in your controller like this

$scope.createDataChunks = function() {
    var a = $scope.DATA,
        retArr = [];
    while(a.length) {
       retArr.push(a.splice(0,3));
    }

    return retArr;
}

, 3 ( ) ,

<div ng-repeat="data in createDataChunks()">
    <div class="conjunto-{{$index/3}} row" ng-show="$index % 3 == 0" ng-include="'html.html'">
        <!-- put custom HTML here -->
    </div>
</div>

, , ?