Angular hide a div if its repeating sibling has no elements inside after filtering

Question

I have a structure like that and I want to hide the divider if there are no elements inside the inner repeating div after it's been filtered (like checking theme.items.length === 0 but after filtering)

<div ng-repeat="theme in myObj">
    <div class="item item-divide" ng-show="showDivider">{{theme.name}}</div>
    <div ng-repeat="item in theme.items | myCustomFilter: searchQuery: this">
      <!--code for displaying each item-->
    </div>
<div>

I tried passing the current scope to myCustomFilter and changing showDivider property from there, but once it hides the element it's not going to show it correctly when searchQuery is changed.

did you think about css and ng-class solution ? – Denis Jul 13 '16 at 16:56 — Denis, Jul 13 '16 at 16:56

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

One way would be to assign the filtered result to a variable in your template:

<div ng-repeat="item in (filteredItems = (theme.items | myCustomFilter: searchQuery: this) )">

and then you can use that variable (which is by the way bound on scope) to print the length or use if for other purposes:

<div> count: {{ filteredItems.length }} </div>

You can check out this answer for more details: AngularJS - how to get an ngRepeat filtered result reference

edited May 23 '17 at 11:44

Community

1
1

answered Jul 13 '16 at 16:52

AJ Meyghani

4,389
1
31
35

don't need to use `filteredItems =` any more since `as alias` was introduced in `ng-repeat`. Accomplishes same thing. Either way is simpler than creating custom filter though – charlietfl Jul 13 '16 at 17:35

Deep · Accepted Answer · 2016-07-13T17:05:54.897

you can achieve this using the custom filter.

Check the snippet below, filter will return an empty array if search is done. By checking the length of the response you can show/hide the divider element.

  var app =angular.module('app', []);
  app.controller('MainCtrl', function($scope) {

  $scope.search= '';

  var myObj = [
                {
                  "name": "theme1",
                  "items": [{"name":"red"}]
                }
            ] 

  $scope.myObj = myObj;

}).filter('propFilter', function() {
return function(prop, searchTerm) {
  
  var filteredProps = [];
  
  if(searchTerm === "")
  {
    return prop;
  }
  else
  {
    return filteredProps;
  }
}
  })

  <html ng-app="app">
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
</head>
<body  ng-controller="MainCtrl">
 
<div class="input-group">
      <label>Search </label>
      <input type="text" class="form-control" ng-model="search" search-box="" />
    </div>
  <div ng-repeat="theme in myObj">
  <div class="item item-divide" ng-show="filteredProps.length > 0">{{theme.name}}</div>
    <div ng-repeat="item in theme.items | propFilter: search as filteredProps">
    {{item.name}}
  </div>
  <div>
  </div>
</div>
</body>
</html>

Overkill when length of filtered array is already easy to get right in view — charlietfl, Jul 13 '16 at 17:39

Angular hide a div if its repeating sibling has no elements inside after filtering

2 Answers2