Javascript 仅在以下情况下添加ng类<；a>；在给定元素之后存在

我有一个按标签分组的项目列表，并且正在使用过滤器搜索该列表。问题是列表的标签仍然显示在搜索中，但是列表本身是空的，因此我需要隐藏适当的标签。为此，我可以用class

.item

检查标签后面是否存在锚定标记，如果不存在锚定标记，则我要将

.hidden

类添加到标签中

我尝试了以下几点，但由于我是新手，它显然不起作用：

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

我的标签
我的标题2

如所述，您可以存储筛选结果，然后按如下方式引用：

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

我的头衔

我将整个组包装在一个div中，该div具有

nginit

，该div创建了一个名为

filteredItems

的变量，并在另外两个地方使用它。第一种是使用

ng if

有条件地呈现整个div。我相信这会解决你的实际问题。其次，我使用

ng repeat

中的

filteredItems

作为锚定标记。

如所述，您可以存储筛选结果，然后参考如下：

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

我的头衔

---

我将整个组包装在一个div中，该div具有

nginit

，该div创建了一个名为

filteredItems

的变量，并在另外两个地方使用它。第一种是使用

ng if

有条件地呈现整个div。我相信这会解决你的实际问题。其次，我使用

ng repeat

中的

filteredItems

作为锚定标记。

以防您希望按照原始方法检查是否存在

重要的一点是：确保包含jquery，以便
next（）
选择器工作。JQLite不支持带有选择器的
next（）

就我个人而言，我喜欢@pgreen2的方法。它更像是一种有角度的做事方式。
如果你想按照最初的方法检查是否有

重要的一点是：确保包含jquery，以便
next（）
选择器工作。JQLite不支持带有选择器的
next（）

就我个人而言，我喜欢@pgreen2的方法。它更像是一种有角度的做事方式。
下一步（a）.length@Tushar我相信这是jQlite选择器：我假设我使用的不正确。我不确定，但你能在
ng class
中调用函数，执行你的条件并返回类名吗？类似于
next（a）
可以是一个函数，它将类名作为string@Ilja我说的不是选择器，我说的是运算符
？
。如果是三元运算符，则将其用作
条件？truePart:falsePart
。例如，
cond？“隐藏“：”
@Tushar-ah-gotcha，更新了我的问题，现在“显示”始终显示
下一步（a）。length@Tushar我相信这是jQlite选择器：我假设我使用不正确。我不确定，但你能调用
ng类中的函数，执行你的条件并返回类名吗？类似于
next（a）
可以是一个函数，它将类名作为string@Ilja我说的不是选择器，我说的是运算符
？
。如果是三元运算符，则将其用作
条件？truePart:falsePart
。例如，
cond？“隐藏“：”
@Tushar ah gotcha，更新了我的问题，现在“显示”显示我写的代码一直未经测试，有可能包装
div
上的
ng if
不起作用，所以你需要将它移到
div
我使用的ng init=“filteredItems=（items | filter:searchFilter）”ng if=“过滤网“在一个包含标签的div上，如果没有包装器，它就不起作用了，这仍然是正确的使用方法，还是我需要反驳我的代码以使用filteredItems中的包装器div和item而不是items中的item？因为我希望它们最初都显示出来。我编写的代码未经测试，在包装
div
上有
ng if
可能不起作用，所以您需要将其移动到
div
中，我在包含div的标签上使用了ng init=“filteredItems=（items | filter:searchFilter）”ng if=“filteredItems”，如果没有包装器，它就不工作了，这仍然是正确的使用方法吗？还是我需要在filteredItems中使用包装器div和item而不是items中的item来反驳我的代码？因为我希望它们最初都显示出来。
<!-- 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>

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