javascript - 仅当给定元素后存在 <a> 时才添加 ng-class

Question

我有一个按标签分组的项目列表，并且正在使用过滤器来搜索该列表。问题是列表的标签仍然显示在搜索中，但列表本身是空的，因此我需要隐藏适当的标签。为此，我可以检查我的标签后面是否存在 .item 类的 anchor 标记，如果不存在，那么我想将 .hidden 类添加到标签中。

我尝试了以下操作，但由于我是 Angular 新手，它显然不起作用:

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

如果列表中有项目，这就是整个组/部分的外观:

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

我与检查员核实，如果相关标签与搜索不匹配，则确实会被删除。

更新:

向 ng-class 添加了 false case，但仍然没有运气

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

更新2:完整结构

<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

一件重要的事情:确保在 next() 中包含 jquery选择器工作。 JQLite 不支持next()带选择器。

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