angular hide when filtered array is empty

Question

I have multiple ng-repeats which use a custom filter and I would like to hide the list. Each list has its own someScopeValue value which is used to determine if a repeated item should be included (or filtered out).

My first attempt doesn't work and it's clear why not (items is only filtered in the ng-repeat and ng-show doesn't know about this:

<!-- this is clearly not smart logic -->
<ul ng-show="items.length">
    <li ng-repeat="item in items | customFilter:someScopeValue">text</li>
</ul>
...
<ul ng-show="items.length">
    <li ng-repeat="item in items | customFilter:someScopeValue">text</li>
</ul>

Is there a way to also apply the filter to the ng-show? Here are some ideas I have but curious if there's a best practice or smarter way to do this:

<!-- this would filter the list somewhere in each <ul> scope -->
<ul ng-show="filteredList.length">
    <li ng-repeat="item in filteredList">text</li>
</ul>

Or, maybe I can use ng-init in some smarter way?

<!-- this filters the list on-the-fly for each <ul> using some scope function -->
<ul ng-init="filteredList = filter(items, someScopeValue)" ng-show="filteredList.length">
    <li ng-repeat="item in filteredList">text</li>
</ul>

Amir Popovich · Accepted Answer · 2016-08-25 22:04:51Z

2

You can created a new variable on your scope that will be the filtered array like this:

<ul ng-show="filteredItems.length">
  <li ng-repeat="item in items | filter:someScopeValue as filteredItems">{{item.value}}</li>
  <li>Extra</li>
</ul>

When doing something like this you will have a $scope.filteredItems created.

JSFIDDLE.

edited Aug 25, 2016 at 22:04

answered Aug 25, 2016 at 21:54

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

Comments

Jeffrey Jarry · Accepted Answer · 2016-08-25 21:08:40Z

1

If you are not changing the data after you sort the data you could manipulate the array first inside the controller. Then just use your first suggestion of ng-show="filteredList.length".

answered Aug 25, 2016 at 21:08

Jeffrey Jarry

1562 silver badges6 bronze badges

Comments

James Cootware · Accepted Answer · 2016-08-25 21:42:49Z

1

Here's the route I went with your question. I set a watch on a list in scope that was being modified by the filter, and based the show on another variable that was holding the length. Here's an example fiddle.

  $scope.counter = $scope.items.length;

  $scope.$watch("items.length", function(newValue, oldValue) { 
    $scope.counter = newValue;
  });

answered Aug 25, 2016 at 21:42

James Cootware

3812 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:49Z

0

Yes, you can use ng-init or introduce a variable in the template. But I would recommend to filter your data inside the controller and expose the filtered array to the template. Especially if you have to hide the parrent <ul> element.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 25, 2016 at 21:06

Sebastian Sebald

17k5 gold badges65 silver badges66 bronze badges

Collectives™ on Stack Overflow

angular hide when filtered array is empty

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related