angular js ng-class 将表达式显示为类而不是处理它

Posted 2023-02-22

【中文标题】angular js ng-class 将表达式显示为类而不是处理它

【英文标题】：angular js ng-class shows expression as class instead of processing it

【发布时间】：2015-11-06 03:59:29

【问题描述】：

我正在尝试使用 Angular js 来突出显示菜单项。我已阅读this question 并尝试实现 anwser，但不是从角度评估表达式，而是将其显示为类名。不知道怎么回事。

我将菜单项列为 JSON，并使用 ng-repeat 对其进行迭代。创建列表项后，如果位置 url 与菜单项的link.href 属性相同（它是 json 属性，而不是 html 属性），我希望角度添加 'active' 类。

这是相关的html：

<div class="header" ng-controller="NavbarController">
      <ul>
         <li ng-repeat="link in menu" ng-class=" active: isActive( link.href ) "><a ng-href=" link.href "> link.item </a>
    </li>
      </ul>
    </div>

和我的控制器：

.controller('NavbarController', function ($scope, $location) 

        // navbar links
        $scope.menu = [
            
                item: 'PTC-Testers',
                href: '#/PTC-Testers'
            ,
            
                item: 'articles',
                href: '#/articles'
            ,
            
                item: 'PTC sites',
                href: '#/sites'
            ,
            
                item: 'account reviews',
                href: '#/account_reviews'
            ,
            
                item: 'forum',
                href: '#/forum'
            ,
            
                item: 'contact us',
                href: '#/contact'
            ,
            
                item: 'login',
                href: '#/login'
            
        ]; // end $scope.menu

        $scope.isActive = function (viewLocation)  
            return viewLocation === $location.path();
        ;


    );

这是一个更大项目的导航栏部分，我尝试只插入相关代码。如果您需要更多信息以正确理解问题，请告诉我。

【问题讨论】：

ng-class="active : isActive(link.href)"> 应该是ng-class="active : isActive(link.href)">，你错过了右大括号。

添加了右大括号，仍然是同样的问题。将主代码更新为 ng-class=" active: isActive( link.href ) "，现在 html 输出如下所示：ng-class=" active: isActive(#/PTC-Testers) "

使用ng-class="active : isActive(link.href)">

是的，我做到了，输出仍然相同：ng-class="active : isActive(link.href)"。当我将 link.href 放在双大括号中时，它会正确传递属性但忽略函数

然后把代码放到 JSFiddle/Plunker 上。其他地方错了。

【参考方案1】：

应该是ng-class="'active' : isActive(link.href)" 您没有在 ng-class 中结束大括号，最好将类名放在引号内

【讨论】：

添加了右大括号，仍然是同样的问题。将主代码更新为 ng-class=" active: isActive( link.href ) "，现在 html 输出如下所示：ng-class=" active: isActive(#/PTC-Testers) "

使用这个 ng-class="'active' : isActive(link.href)" 。将单词 active 放在引号内

刚刚试了一下，结果还是一样，只是现在active是在输出中用单引号

问题是列表标签是从我的控制器中定义的 JSON 对象生成的。在我将列表项作为单独的对象直接写入我的 html 标记后，您的代码开始按预期工作。如果您可以将其插入您的答案，或者甚至解释为什么会发生这种情况，我很乐意接受。感谢您的帮助

没问题...很高兴您的代码开始工作:)