Pavel Fanko Pavel Fanko - 1 year ago 59
AngularJS Question

Angular hide a div if it's 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">{{}}</div>
<div ng-repeat="item in theme.items | myCustomFilter: searchQuery: this">
<!--code for displaying each item-->

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.

Answer Source

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 sho hide the divider element.

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

  $ '';

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

  $scope.myObj = myObj;

}).filter('propFilter', function() {
return function(prop, searchTerm) {
  var filteredProps = [];
  if(searchTerm === "")
    return prop;
    return filteredProps;
  <html ng-app="app">
  <script src=""></script>
<body  ng-controller="MainCtrl">
<div class="input-group">
      <label>Search </label>
      <input type="text" class="form-control" ng-model="search" search-box="" />
  <div ng-repeat="theme in myObj">
  <div class="item item-divide" ng-show="filteredProps.length > 0">{{}}</div>
    <div ng-repeat="item in theme.items | propFilter: search as filteredProps">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download