Show only open div with angular if

问题:

I'm trying to acheive the same behavior as the spring code below:

<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> 

Explaining: I want a new div from class row only after 3 other HTML elements have been added. I have tried this with ng-if, like this:

<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 doesnt work because only one element with be inside de div.row.

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

Thanks in advance.

回答1:

Ok the best way to do this IMO is 2 fold, in your controller have a method similar to this

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

This would give you an array of arrays, each containing 3 (or less) items in it, you then have this as your markup

<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> 

I think that's roughly what you are after?

文章来源: Show only open div with angular if