Question

我希望我的应用程序在ngReapet内的一行中只显示9个细分/图像（带有id＃menu-entry）。我的代码如下，但只显示一个条目。

<menu role="main-menu" type="toolbar" class="hidden-xs">
   <div ng-repeat="game in allGames | orderBy: 'gamename'">
        <div id=#row class="col-lg-12 col-md-12 col-sm-12" ng-if="($index +1) % 9 == 1">
            <div class="menu-entry">
                <a href="category?game={{game.gameid}}" title="{{game.gamename}}!">
                    <img src="img/icons/{{game.gamename}}_logo.png" alt="Przejdź do działu z {{game.gamename}}!" class="img-responsive" />
                </a>
            </div>

        </div>
        <div ng-if="(($index +1) % 9 == 0) || $index == $last "></div>
    </div>
</menu>

热修复它以显示所有菜单条目，9行，根据需要显示尽可能多的行。

Answer 1

    <div ng-init="arr=[1,2,3,4,5,6,7,8,9,437,67,436,345,54,1,2,3,4,5,6]"></div>
    <span ng-repeat = "i in arr track by $index">
        <span>{{i}}</span>
        <div ng-if="($index+1)%9==0"></div>
    </span>

即使您可以使用div代替span，但请确保

<span ng-repeat = "i in arr track by $index">
    <span>{{i}}</span>

如果您将上述行设为divs，则其显示属性应为inline-block和

<div ng-if="($index+1)%9==0"></div>

其显示属性应为block，以便每行获得9 divs。

https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview

Answer 2

我是按照以下方式制作的，但也许版本较短？也许ngRepeat在ngRepeat里面？

<menu role="main-menu" type="toolbar" class="hidden-xs">

    <div ng-repeat="game in allGames | orderBy: 'gamename'">
        <div class="col-lg-12 col-md-12 col-sm-12" ng-if="$index % 9 == 0">

            <div class="menu">
                <a href="category?gameid={{allGames[$index].gameid}}" title="{{allGames[$index].gamename}}!">
                    <img src="img/icons/{{allGames[$index].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+1].gameid}}" title="{{allGames[$index+1].gamename}}!">
                    <img src="img/icons/{{allGames[$index+1].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+1].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+2].gameid}}" title="{{allGames[$index+2].gamename}}!">
                    <img src="img/icons/{{allGames[$index+2].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+2].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+3].gameid}}" title="{{allGames[$index+3].gamename}}!">
                    <img src="img/icons/{{allGames[$index+3].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+3].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+4].gameid}}" title="{{allGames[$index+4].gamename}}!">
                    <img src="img/icons/{{allGames[$index+4].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+4].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+5].gameid}}" title="{{allGames[$index+5].gamename}}!">
                    <img src="img/icons/{{allGames[$index+5].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+5].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+6].gameid}}" title="{{allGames[$index+6].gamename}}!">
                    <img src="img/icons/{{allGames[$index+6].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+6].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+7].gameid}}" title="{{allGames[$index+7].gamename}}!">
                    <img src="img/icons/{{allGames[$index+7].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+7].gamename}}!" class="img-responsive" />
                </a>
            </div>

            <div class="menu">
                <a href="category?gameid={{allGames[$index+8].gameid}}" title="{{allGames[$index+8].gamename}}!">
                    <img src="img/icons/{{allGames[$index+8].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+8].gamename}}!" class="img-responsive" />
                </a>
            </div>

        </div>
    </div>
</menu>

如何在一行中显示N个div

2 个答案: