CODEWITHSUNDEEP
angularjs
Pavel Fanko
Pavel Fanko

Reputation: 25

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

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.

Upvotes: 0

Views: 409

Answers (2)

Deep
Deep

Reputation: 9794

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>

Upvotes: 0

AJ Meyghani
AJ Meyghani

Reputation: 4609

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

Upvotes: 1

Related Questions