How to hide element if filter returns null angularjs

Question

I've got a list of products which I loop through. The list should be sorted alphabetically, and each first new letter had the capital first letter at the top, which I got working.

<div ng-repeat="product in data.products | orderBy : 'naam' : false | filter:searchText:strict track by $index  ">
  <li class="tooltipproduct" data-tooltip-content="1">
    //THIS LINE HERE HAS A FILTER ON IT IF ITS THE FIRST ITEM OF THIS ALPHABET LETTER
    <span style="color:#eb9600;font-size:25px;font-weight:800;">{{ product.naam | firstLetterFilter }}</span><br>
    <span class="tooltip1" data-tooltip-content="#tooltip_content{{$index + 1}}" style="cursor:pointer;">{{ product.naam }}</span><br>
  </li>
  <div class="tooltip_templates" style="background-color:#eb9600;">
    <span id="tooltip_content{{$index + 1}}" style="min-height:180px;!important">
      <h2 style="font-size: 20px;color:#fff;font-weight:bold;">{{product.naam}}</h2>
      <p style="max-width:200px;">{{ product.omschr_kort }}</p>
      <span>Meer informatie nodig <br> of snel een scherpe offerte?</span>
      <br>
      <a style="position:absolute;bottom:20px;font-weight:bold;color:#fff;background-color:#c17c02;padding:10px;border-radius:3px;" href="contact.php">Vraag offerte aan</a>
      <img style="max-width:90px;position:absolute;bottom:0px;right:12px;" src="images/contact_jess.png" />
    </span>
  </div>
</div>

Here's the filter:

.filter('firstLetterFilter', function () {
  var firstLetters = [];
  return function (item) {
    if(item !== undefined) {
      var firstLetter = item.charAt(0);
      if(firstLetters.indexOf(firstLetter) === -1) {
        firstLetters.push(firstLetter);
        //console.log(firstLetter);
        console.log(firstLetters);
        return firstLetter;
      }
    }
  };
});

What happens is the span gets created every time, but when it's not the first item with that letter it remains empty. I tried putting a ng-if on it with the ng-if="product.naam | firstLetterFilter" filter on it but this returns true even if it's empty.

Does someone know how I can hide the item if the filtered item returns nothing?

Answer 1

Just return false from the filter, so that it will hide the element.

Return false, when it's not the first item with that letter.

.filter('firstLetterFilter', function () {
  var firstLetters = [];
  return function (item) {
    if(item !== undefined) {
      var firstLetter = item.charAt(0);
      if(firstLetters.indexOf(firstLetter) === -1) {
        firstLetters.push(firstLetter);
        //console.log(firstLetter);
        console.log(firstLetters);
        return firstLetter;
      }
      else
        {
          return false
        }
    }

  };
});

Answer 2

Fixed it like this for future readers HTML:

<div ng-repeat="product in data.products | orderBy : 'naam' : false | filter:{'naam' : searchText} track by $index  ">
  <li class="tooltipproduct" data-tooltip-content="1">
    <span style="color:#eb9600;font-size:25px;font-weight:800;" ng-if="product.naam | firstLetterFilter">{{ product.naam | firstLetterFilterTrue }}<br /></span>
    <span class="tooltip1" data-tooltip-content="#tooltip_content{{$index + 1}}" style="cursor:pointer;">{{ product.naam }}</span><br>
  </li>
  <div class="tooltip_templates" style="background-color:#eb9600;">
    <span id="tooltip_content{{$index + 1}}" style="min-height:180px;!important">
      <h2 style="font-size: 20px;color:#fff;font-weight:bold;">{{product.naam}}</h2>
      <p style="max-width:200px;">{{ product.omschr_kort }}</p>
      <span>Meer informatie nodig <br> of snel een scherpe offerte?</span>
      <br>
      <a style="position:absolute;bottom:20px;font-weight:bold;color:#fff;background-color:#c17c02;padding:10px;border-radius:3px;" href="contact.php">Vraag offerte aan</a>
      <img style="max-width:90px;position:absolute;bottom:0px;right:12px;" src="images/contact_jess.png" />
    </span>
  </div>
</div>

Filters:

filter('firstLetterFilter', function () {
  var firstLetters = [];
  return function (item) {
    if(item !== undefined) {
      var firstLetter = item.charAt(0);
      if(firstLetters.indexOf(firstLetter) === -1) {
        firstLetters.push(firstLetter);
        //console.log(firstLetter);
        console.log(firstLetters);
        return firstLetter;
      }
    }
  };
})
.filter('firstLetterFilterTrue', function () {
  return function (item) {
    if(item !== undefined) {
      var firstLetter = item.charAt(0);
      return firstLetter;
    }
  };
});