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

Question

我有一个列表，我试图将类设置为单击的列表项(但应该仅为单击的项设置类)。

我尝试这样做，但没有运气:

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

请问我该如何以正确的方式做到这一点？

感谢您的帮助。

Answer 1

太棒了。 抱歉，因为我没有 plunker 帐户，所以我必须从理论上向您解释。

乔治，您必须在 Controller 中创建选择您的项目的函数，例如，在您的情况下:

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

请查看 ng-click 部分。您必须从列表(“主题”)中传递项目(在您的情况下为“主题”)的一些属性(“主题.名称”)，因为您无法比较对象。

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