仅显示带角度的打开 div 如果 [英] Show only open div with angular if

问题描述

我正在尝试实现与下面的 spring 代码相同的行为:

<c:if test="${(contador.count-1)%3==0}"><div class="conjunto-${conjunto} row"><!-- 显示起始 div --></c:if><!-- 这里有一些 HTML --><c:if test="${((contador.count-1)%3==2)}">

</c:if></c:forEach>

说明:只有在添加了 3 个其他 HTML 元素后，我才需要 row 类的新 div.我已经用 ng-if 试过了，像这样:

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

但它显然不起作用，因为只有一个元素在 de div.row 内.

是否有一个 if 子句可以让我只添加开始的 div 然后稍后关闭它?

提前致谢.

解决方案

好的，IMO 最好的方法是 2 折，在你的控制器中有一个类似于这个的方法

$scope.createDataChunks = function() {var a = $scope.DATA,retArr = [];而(a.长度){retArr.push(a.splice(0,3));}返回 retArr;}

这会给你一个数组数组，每个数组包含 3 个(或更少)项，然后你把它作为你的标记

<div class="conjunto-{{$index/3}} row" ng-show="$index % 3 == 0" ng-include="'html.html'"><!-- 将自定义 HTML 放在这里 -->

我认为这大致是您所追求的?

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.

解决方案

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?

这篇关于仅显示带角度的打开 div 如果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！