如果过滤器返回null angularjs如何隐藏元素

Question

我有一个循环浏览的产品列表。该列表应按字母顺序排序，每个第一个新字母的顶部都有大写的第一个字母，这是我开始工作的。

<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>

这是过滤器：

.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;
      }
    }
  };
});

每次都会创建跨度，但当它不是第一个带有该字母的项目时，它仍然是空的。我尝试使用ng-if="product.naam | firstLetterFilter" 过滤器在其上放置ng-if，但即使它为空也会返回true。

如果过滤后的项目没有返回任何内容，有人知道我如何隐藏该项目吗？

Answer 1

只需从过滤器中返回 false，它就会隐藏元素。

如果不是第一个带有该字母的项目，则返回 false。

.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

为以后的读者修复了这样的问题 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>

过滤器：

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;
    }
  };
});