Показывать товары в коробках, используя классы angularjs ng repeat и bootstrap, но они отображаются неправильно - PullRequest
Новая
       19

Показывать товары в коробках, используя классы angularjs ng repeat и bootstrap, но они отображаются неправильно

0 голосов
/ 24 сентября 2018

Я хочу показывать товары в коробках, как товары на других сайтах электронной коммерции.

Я использую AngularJS ng-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>

Требуется Вывод на веб-сайт:

item1 item2 item3 item3 *4011*

item5 item6 item7 item7 item8.,.

Текущий вывод:

item1 item4 item6

item2 item5 item7

item3 (без элемента) item8

(без элемента)- item9

Ссылка: http://plnkr.co/edit/wyAXgfa2U4gCBtQmYSr2?p=info

1 Ответ

0 голосов
/ 24 сентября 2018

Вы можете использовать 

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

Обновлен плункер

...