CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Jordash
Jordash

Reputation: 3103

Angular ng-repeat hide outer filter if inner filter doesn't have value

I have an ng-repeat within an ng-repeat filtering on specific values, I want to hide the outer filter div if there is no values that are generated by the inner filter, is that possible?

<div class="feedEntry" ng-repeat="entry in entries | orderBy:'-' track by $index" ng-if="entry.userID" ng-if="entry.hasFollowing">
    {{entry.hasFollowing}}
    <span ng-repeat="follow in follows | filter:{following:entry.userID, follower:currentUser.userID}">
        <div class="feedUserSubmission" ng-init="entry.hasFollowing = true">
            {{entry.name}}
        </div>
    </span>
</div>

Upvotes: 1

Views: 359

Answers (3)

Abdalla Elabd
Abdalla Elabd

Reputation: 81

Well, here's a workaround I would do if I couldn't find a solution.

You simply execute a $parent.showParent = true in the inner ng-repeat, which will execute only if there's a result of the filtering of the inner ng-repeat, affecting the scope of the outer ng-repeat since.

Then you'd do something like ng-show="showParent" on the outer ng-repeat

<div class="feedEntry" ng-repeat="entry in entries | orderBy:'-' track by $index"  ng-show="showParent" ng-if="entry.userID" ng-if="entry.hasFollowing">
    {{entry.hasFollowing}}
    <span ng-repeat="follow in follows | filter:{following:entry.userID, follower:currentUser.userID}" ng-init="$parent.showParent = true">

        <div class="feedUserSubmission" ng-init="entry.hasFollowing = true">
            {{entry.name}}
        </div>
    </span>
</div>

Upvotes: 2

Lucas
Lucas

Reputation: 10313

If you want to hide all content meaning parent div:

<div ng-show="(follows | filter:filterByGroup(entry)).length">
    <div class="feedEntry" ng-repeat="entry in entries | orderBy:'-' track by $index" ng-if="entry.userID" ng-if="entry.hasFollowing">
      ...
    </div>
 </div>

Upvotes: 1

amighty
amighty

Reputation: 784

You can make use of ng-hide with inner filter condition

ng-hide="(follows | filter:{following:entry.userID, follower:currentUser.userID}).length == 0"

e.g.

<div class="feedEntry" ng-repeat="entry in entries | orderBy:'-' track by $index" ng-if="entry.userID" ng-if="entry.hasFollowing" ng-hide="(follows | filter:{following:entry.userID, follower:currentUser.userID}).length == 0">
    {{entry.hasFollowing}}
    <span ng-repeat="follow in follows | filter:{following:entry.userID, follower:currentUser.userID}">
        <div class="feedUserSubmission" ng-init="entry.hasFollowing = true">
            {{entry.name}}
        </div>
    </span>
</div>

Upvotes: 1

Related Questions