Angular，如何将类设置为单击的列表项并从其他列表项中删除li项

Angular, how to set class to the clicked list item and remove from others li items?

本文关键字：列表 其他 li 删除 单击 设置 Angular      更新时间：2023-09-26

我在这个列表中尝试为单击的列表项设置类（但类应该只为单击的项设置）。

我试着用这种方式做，但没有运气：

<a href="" 
   ng-ctrl="ThemesCtrl" 
   ng-click="checkThemeContent(theme);" 
   ng-repeat="theme in themes" 
   ng-hide="theme[filterProp] !== filterValue" 
   class="list-group-item">
    <b>{{theme.name}}</b>
    <span class="themesListIcons">
        <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
        <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
    </span>
</a>

我怎样才能以正确的方式做这件事？

谢谢你的帮助。

太棒了。很抱歉，因为我还没有帐号，所以我必须用理论的方法给你们解释。

George，您必须在控制器中创建功能来选择您的项目，例如，在您的情况下：

$scope.checkThemeContent = function (name) {
    $scope.selectedName = name;
}

在这个步骤之后，您必须只在HTML中调用这个函数，如下所示：

<a href="" 
   ng-class="{selected:theme.name==selectedName}"  
   ng-click="checkThemeContent(theme.name)" 
   ng-repeat="theme in themes" 
   class="list-group-item">
    <b>{{theme.name}}</b>
    <span class="themesListIcons">
        <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
        <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
    </span>
</a>

请看一下点击部分。您必须传递列表（"emes"）中项（在您的情况下为"theme"）的某些属性（"eme.name"），因为您无法比较对象。

在ng类中，您还必须传递与ng click中相同的属性。希望能有所帮助。

您需要更改语法ng-class指令

<a href="" 
   ng-class="{'selected':$index==selectedIndex}"  
   ng-ctrl="ThemesCtrl" 
   ng-click="checkThemeContent(theme);currentTheme=theme" 
   ng-repeat="theme in themes" 
   ng-hide="theme[filterProp] !== filterValue" 
   class="list-group-item">
    <b>{{theme.name}}</b>
    <span class="themesListIcons">
        <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
        <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
    </span>
</a>

如果"selectedIndex"是表示控制器中所选项目的范围变量，而"selected"是CSS类，请尝试更改ng类部分，如下所示：

ng-class="{selected: $index==selectedIndex}"
相关文章：