Блог

Главная - Вопросы по программированию - Как скрыть элемент, если filter возвращает null angularjs

Как скрыть элемент, если filter возвращает null angularjs

#javascript #angularjs #filter #angularjs-ng-repeat

#javascript #angularjs #Фильтр #angularjs-ng-repeat

Вопрос:

У меня есть список продуктов, которые я просматриваю. Список должен быть отсортирован в алфавитном порядке, и каждая первая новая буква должна содержать заглавную первую букву вверху, которую я получил рабочей. 

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

Что происходит, так это то, что span создается каждый раз, но когда это не первый элемент с этой буквой, он остается пустым. Я попытался поместить ng-if на него с ng-if="product.naam | firstLetterFilter" фильтром, но это возвращает true, даже если оно пустое.

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

Ответ №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
        }
    }

  };
});

Комментарии:

1. Фильтра нет в ng-repeat. Фильтр находится в шаблоне: <span style="color:#eb9600;font-size:25px;font-weight:800;">{{ product.naam | firstLetterFilter }}</span><br>

2. Нет, я только что привел вам пример, измените фильтр на код, который я привел выше

3. просто добавьте еще условие, пожалуйста, проверьте мой ответ сейчас

4. Не сработало, потому что ng-if добавляет его в массив, поэтому, когда я пытаюсь привязать его к шаблону, он возвращает пустой, потому что это второй раз.

5. вас не понял. можете ли вы объяснить один раз

Ответ №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;
    }
  };
});