Ограничения нет. столбцов подряд ng-repeat: угловой

0

У меня есть страница для отображения списка моих друзей для нашего веб-приложения. Моя проблема в том, что я не могу ограничить количество друзей, показанных в одной строке. Мне нужно отображать 3 друзей в каждой строке:

<div class="row" style="padding-left:200px;">   
        <div ng-repeat="favourite in  favouriteData.data.result">
            <div class="col-sm-4 col-md-3 col-lg-2">
                <div class="fav_image" >
                    <img ng-src='/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
                    <h4 class="aju_fav">{{favourite.username}}</h4>
                    <h4 class="aju_fav">{{favourite.city}}</h4>
                    <h4 class="aju_fav"><a href="" style="text-decoration: none;" ng-click="makeUnfavourite(favourite.userId,$index);remove(favouriteData.data.result,$index)">Un-Favourite</a></h4>
                    <div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
                </div>
            </div>  
    </div>

PLZ помочь решить проблему

Теги:
ng-repeat

2 ответа

3
Лучший ответ

Если вы хотите всегда отображать 3 столбца на строку (независимо от ширины экрана), вы можете просто использовать col-xs-4 (в <div class="row"> содержащий ng-repeat):

<div class="row" ng-repeat="favourite in  favouriteData.data.result" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <div class="fav_image">
        <img ng-src='http://192.168.1.75/zentiera/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
        <h4 class="aju_fav">{{favourite.username}}</h4>
        <h4 class="aju_fav">{{favourite.city}}</h4>
        <h4 class="aju_fav"><a href="" style="text-decoration: none;" ng-click="makeUnfavourite(favourite.userId,$index);remove(favouriteData.data.result,$index)">Un-Favourite</a></h4>
        <div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
    </div>
</div>
Поделиться
  • 0
    этот ответ отображает одного друга в каждой строке.
  • 0
    работает над этим на скрипке: jsfiddle.net/halirgb/Lvc0u55v , еще не работает ... :-(
Показать ещё 3 комментария
-2

Лучше всего использовать компонент фильтра "limitTo" в ng. Вот документация

<div ng-repeat="favourite in  favouriteData.data.result | limitTo:3">
Поделиться
  • 0
    Не отвечайте дважды на один и тот же вопрос
  • 0
    Фильтр limitTo ограничивает весь набор результатов. Это не может быть использовано для ограничения нет. столбцов в строке. Как вы можете сослаться на угловые документы ... docs.angularjs.org/api/ng/filter/limitTo

Ещё вопросы

Сообщество Overcoder
Наверх
Меню