CODEWITHSUNDEEP
jqueryangularjs
Karan
Karan

Reputation: 1108

Show message empty result after filter data angularjs

I am creating a app using angularjs. I have Integrated multiple filters and search result according to filters.but I am unable to show message no result when filter returns no result. Here is my code:

 <div dir-paginate="partners in partnersData|orderBy:orderByField:reverseSort|filter:partners.name|filter:partners.website|filter:partners.location|itemsPerPage: pageSize" current-page="currentPage">
          <div class="rowDiv">
            <div class="cellDiv"><span   ng-click="makeFavourite(partners)" class="star_rating" ng-class="{'select':partners.select}"></span> <span ng-click="showImage($index)"></span></div>
            <div class="cellDiv" ng-click="showName($index)">{{partners.name}}</div>
            <div class="cellDiv">{{partners.website}}</div>
            <div class="cellDiv">{{partners.location}}</div>
            <div class="cellDiv">{{partners.service}}</div>
            <div class="cellDiv">{{partners.connection}}</div>
            <div class="cellDiv">{{partners.action}}</div>
            <div class="cellDiv lastCell"><span class="icon_pluse" ng-click="openPlus($index)"></span><span class="icon_info" ng-click="openInfo($index)"></span></div>
          <div ng-if="partnersData.length === 0">No Items Found</div>
          </div>

Upvotes: 1

Views: 829

Answers (2)

charlietfl
charlietfl

Reputation: 171679

As of angular 1.4 you can create an alias for filtered array using as aliasName that will be added to current scope. It is important that as comes after all filters in the expression

<div dir-paginate="partners in partnersData|orderBy:...|...| lastFilter as filteredArray">

</div>

<!-- Outside paginate directive -->
<div ng-if="!filteredArray.length">No results</div>

Upvotes: 5

war1oc
war1oc

Reputation: 2755

you are checking if partnersData's length is 0, which will not occur if filtered. Instead assign the filtered items to a new variable:

<div ng-repeat="partners in filtered = (partnersData | orderBy:orderByField:reverseSort|filter:partners.name|filter:partners.website|filter:partners.location|itemsPerPage: pageSize)">
</div>

then check filtered.length

Upvotes: 0

Related Questions