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

Question

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>

Abdalla Elabd · Accepted Answer · 2016-02-23 19:33:11Z

2

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>

edited Feb 23, 2016 at 19:33

answered Feb 20, 2016 at 0:59

Abdalla Elabd

814 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdalla Elabd Over a year ago

@Jordash Check out this fiddle. I did the same thing but with an ng-init in the ng-repeat

amighty · Accepted Answer · 2016-02-20 02:12:34Z

1

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>

answered Feb 20, 2016 at 2:12

amighty

7844 silver badges12 bronze badges

Comments

Lucas · Accepted Answer · 2016-02-20 23:28:03Z

1

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>

edited Feb 20, 2016 at 23:28

answered Feb 20, 2016 at 0:53

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related