AngularJS: ngClass 的格式

Question

我正在学习 AngularJS，我看到标签 "li" 与 ngClass 指令相关联，该指令具有“{marked: nav.estoy ( '/')}” 值. 我的问题是为什么括号内的值具有 x: y 的形式。 我就是 "nav.estoy ('/') is defined in the controller method but do not understand why the response of this method is to":"

<body ng-app="app">
<nav ng-controller="navCtrl as nav">
    <ul>
        <li ng-class="{marcado: nav.estoy('/')}">
            <a href="#/">Datos personales</a>
        </li>
    </ul>
</nav>

...

Answer 1

ng-class 可以将对象作为参数：angularjs doc

对象的键是要应用的 class 名称，对象的值是将计算真值或假值的表达式。在这种情况下，它表示如果 nav.estoy('/') returns 为真，则 class marcado 将被应用，但它可以很容易地有多个键和多个 class 是如果值评估真实（非零，非空），则应用。

祝你好运！

Answer 2

在您的示例中，如果 nav.estoy('/) returns 为真值，则 class "marcado" 将添加到 class 属性。

来自文档：

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

在 x:y 格式中，x 是 class 名称，y 是表达式。我相信他们使用这种名称值对技术，因此可以使用逗号轻松设置多个 classes。表达式必须 return 一个布尔值。

    <li ng-class="{marcado: nav.estoy('/'), 'another-class': expression}">
        <a href="#/">Datos personales</a>
    </li>

AngularJS: ngClass 的格式

AngularJS: format of ngClass

javascript

angularjs

ng-class