1

当产品在其他电子商务网站上显示时，我想在框中显示产品。

我正在使用 AngularJSng-repeat和引导类，但它以错误的样式显示产品。

这是我的代码：

<div class="row" id="grdDiv">
    <div ng-repeat="category in groupMenuCategories">
        <div class="col-md-3 col-lg-3" ng-repeat="grpMenuItem in category.menuItems">
            {{grpMenuItem.itemName}}
        </div>
    </div>
</div>

网站上所需的输出：

项目1 项目2 项目3 项目4

项目 5 项目 6 项目 7 项目 8 。. .

电流输出：

项目 1 项目 4 项目 6

项目 2 项目 5 项目 7

item3（无项目） item8

（无项目） - item9

链接： http ://plnkr.co/edit/wyAXgfa2U4gCBtQmYSr2?p=info

4

1 回答 1

1

您可以使用

<div class="row">
    <div class="col-sm-3" ng-repeat="grpMenuItem in category.menuItems"> 
        {{grpMenuItem.itemName}}
    </div>
</div>

得到4个等宽的列。

如果您需要单独行中的 4 列中的每一列，您可以尝试以下操作

<div ng-repeat="grpMenuItem in category.menuItems" class="row" ng-if="$index<category.menuItems.length/4+1">
    <div  ng-repeat="grpMenuItem in category.menuItems" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
    </div>
</div>

演示

您的代码中的问题是您的 menuItem 是数组，因此您必须以这种方式获取值 itemName

<div ng-repeat="grpMenuItem in groupMenuCategories" class="row" ng-if="$index<groupMenuCategories.length/4+1">
    <div ng-repeat="grpMenuItem in groupMenuCategories" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
        <h4>{{grpMenuItem.menuItems[0].itemName}}</h4>
    </div>
</div>

更新 plunker

于 2018-09-24T09:15:48.413 回答