Как скрыть элемент, если фильтр возвращает 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 с фильтром ng-if="product.naam | firstLetterFilter", но это возвращает true, даже если оно пустое.

Кто-нибудь знает, как я могу скрыть элемент, если отфильтрованный элемент ничего не возвращает?

Answer 1

Fixed это так для будущих читателей 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; 
    } 
    }; 
}); 

Answer 2

Просто верните 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 
     } 
    } 

    }; 
});