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

您需要更改语法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>

Answer 2

大。很抱歉，因为我没有追加帐号，所以我必须在理论上解释你。

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

$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部分。你必须从list（'themes'）传递item的一些属性（'theme.name'）（在你的情况下'theme'），因为你无法比较对象。

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

Answer 3

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

ng-class="{selected: $index==selectedIndex}"

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

3 个答案: