Search code examples
angularjspaginationangularjs-ng-repeatangular-ng-if

AngularJS - ng-repeat, when it ends, there should be a message saying 'no more products'

I have some products displayed with ng-repeat and paginated. I want someone who can help me with ng-if - to say when ng-repeat finishes or there are no more products when the pagination is over. this is like a carousal previous-next (in one page, four products will be there enter image description here

  <span ng-if='curPage >= category.data.length'>
                            <center><p class="no-products"> There are no more products to show </p> </center>
                        </span>

<div class = "col col-25" ng-repeat="product in category.data| pagination: curPage * pageSize | limitTo: pageSize">               
                        <a href="#/tab/details?product_id={{product.id}}"><img class="full-image" src="{{product.link}}">
                        </a>
                        <center>  <p class="productnamei">
                                <strong> {{product.name}}</strong> </p>                       


                        <a ng-href="#/tab/details?product_id={{product.id}}" class="button button-small button-calm">
                            Buy Now
                        </a>


                    </div>
Solution

  • you can check it with $last ($last boolean true if the repeated element is last in the iterator.)

    Example

    <body  ng-app="app">
  <div ng-repeat ="item in [1,2,3]" tooltip>
   <span data-toggle="tooltip" ng-bind="item"></span>
   <div ng-if="$last">Completed</div>
 </div>
</body>