Question

I have a list of items that are grouped by labels, and am using filter to search through this list. The issue is that labels for lists are still showing in the search, however lists themselves are empty, hence I need to hide appropriate label. To do so I can check if anchor tag exists after my label with class .item, if it doesn't then I want to add .hidden class to the label.

I tried following, but as I am new to angular it obviously didn't work:

<div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
  My Label
</div>

And this is how whole group/section looks if there are items in the list:

<div class="list search-list">
  <div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
     My Label
  </div>
  <a class="item> .. </a>
  <!-- More a tags here -->

  <div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
     My Label 2
  </div>
  <a class="item> .. </a>
  <!-- More a tags here -->
</div>

I checked with inspector, relevant a tags are indeed being removed if they don't match search.

UPDATE:

added false case to ng-class, but still no luck

  <div class="label" ng-class="next(a).length <= 0 ? 'hidden' : 'shown'">
     My Label
  </div>

UPDATE2: Full structure

<ion-view view-title="Search">
  <ion-content ng-controller="SearchCtrl">

    <div class="list search-bar">
      <label class="item item-input">
        <i class="icon ion-ios-search-strong placeholder-icon"></i>
        <input type="text" placeholder="What are you looking for?" ng-model="searchFilter">
      </label>
    </div>

    <div class="list search-list">

      <!-- Group 1 -->
      <div class="item item-divider" ng-class="angular.next('a').length <= 0 ? 'hidden' : 'shown'">
        My Title
      </div>
      <a
        class="item item-avatar"
        href="#/app/{{item.link}}"
        ng-repeat="item in items | filter:searchFilter">
        <img src="img/item.png">
        <h2>{{item.title}}</h2>
        <p>Description</p>
      </a>

      <!-- Group 2 -->
      <div class="item item-divider" ng-class="angular.next('a').length <= 0 ? 'hidden' : 'shown'">
        My Title 2
      </div>
      <a
        class="item item-avatar"
        href="#/app/{{item2.link}}"
        ng-repeat="item2 in items2 | filter:searchFilter">
        <img src="img/item2.png">
        <h2>{{item.title}}</h2>
        <p>Description 2</p>
      </a>

    </div>


  </ion-content>
</ion-view>

Answer 1

如果您想遵循检查<a/>之后是否有<div>元素的原始方法，您可以编写自定义指令。这是检查该条件的那个：

.directive('conditionalDisplay', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      if (element.next('a.item').length == 0)
        element.css('display', 'none');
    }
  }
});

以下是我如何使用它：

<div class="list search-list">
      <div conditional-display class="label">
        My Label (Not Displayed, because there is no next a element)
      </div>
      <!--<a class="item"> .. </a>-->
      <!-- More a tags here -->

      <div conditional-display class="label">
        My Label 2 (Displayed)
      </div>
      <a class="item"></a>
      <!-- More a tags here -->
</div>

这是一个工作的掠夺者：http://plnkr.co/edit/ytCVxuBnbZAbX0faiQ4m?p=preview

一件重要的事情：确保包含jquery以使next()选择器起作用。 JQLite不支持next()选择器。

就个人而言，我喜欢@pgreen2的方法。它更像是角色的做事方式。

Answer 2

正如ng-init所述，您可以存储过滤器的结果，然后如下引用：

<!-- Group 1 -->
<div ng-init="filteredItems = (items | filter:searchFilter)" ng-if="filteredItems">
  <div class="item item-divider">
    My Title
  </div>
  <a class="item item-avatar" href="#/app/{{item.link}}" ng-repeat="item in filteredItems">
    <img src="img/item.png">
    <h2>{{item.title}}</h2>
    <p>Description</p>
  </a>
</div>

我将整个组包装在一个包含ng-init的div中，该div创建了一个名为filteredItems的变量，其中包含两个其他位置。第一种是使用ng-if条件渲染整个div。我相信这会解决你的实际问题。其次，我在filteredItems中使用ng-repeat作为锚标记。

仅在<a> exists after given element

2 个答案: