限制号连续 ng-repeat 中的列数：angular

Question

我有一个页面可以显示我的网络应用程序的好友列表。我的问题是我无法限制一行中显示的朋友数量。我必须在每一行显示 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>

请帮忙解决问题

Answer 1

如果你想总是每行显示 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>

Answer 2

最好的方法是在ng中使用'limitTo'过滤器组件。这里是documentation

<div ng-repeat="favourite in  favouriteData.data.result | limitTo:3">

限制号连续 ng-repeat 中的列数：angular

Restricting no. of columns in a row ng-repeat : angular

angularjs

ng-repeat