javascript - .first() 元素不适用于动态生成的 <li>

Question

我想我在这里遗漏了一些小概念，但已经进行了足够多的谷歌搜索以找到它但没有用。因此在此论坛上发帖寻求帮助。

我正在使用此代码动态生成导航选项卡:

<div class="tabbable">  
 <ul class="nav nav-tabs"  id="testing">

   <li ng-repeat="storageOption in gridOptions[$index].ownedJay" class=""><a href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a></li>


   </ul >

在上面的代码中，class 留空。上面的代码可以根据 storageOption (ng-repeat) 中元素的数量创建许多 li。

但我只想在第一个 li 中添加类“active”。 为此，我在同一页面的脚本部分添加了以下代码:

$(".tabbable ul li").first().addClass("active");    

但上面的代码是在所有生成的 li 中添加 active 类。

任何人都可以让我知道我在这里失踪的地方。

提前致谢。

Answer 1

您需要以 Angular 方式进行操作，因为 Angular 确实通过 ng-class 提供了该选项，它基本上需要像 ng-class="{'class': expression}"这样的表达式。在 ng-class 表达式中，您可以使用 $first 来告诉您它是否是 ng-repeat 的第一个元素，并且使用 ng-href 而不是 href。

标记

<li ng-repeat="storageOption in gridOptions[$index].ownedJay" ng-class="{'active': first}">
    <a ng-href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a>
</li>

备选

如果你想让 active 可切换，那么你可以简单地维护一个标志，该标志将包含选择了哪个 li 的信息。

<ul class="nav nav-tabs" id="testing" ng-init="selected=0">
    <li ng-repeat="storageOption in gridOptions[$index].ownedJay" 
      ng-class="{'active': $index == $parent.selected}" 
      ng-click="$parent.selected == $index">
        <a ng-href="#c{{storageOption.StorageHostname}}" >
          Data{{storageOption.StorageHostname}}
        </a>
    </li>
</ul >

在上面的标记中我使用了 $index 但如果你有 ng-repeat 数组你可以独特的东西。