如何在 AngularJS ngClass 中使用条件表达式？

AngularJS ngClass 中的条件表达式

AngularJS ngClass 指令允许您基于布尔表达式有条件地将 CSS 类应用到 HTML 元素。要使表达式成为条件表达式，您可以使用以下语法：

ng-class="{test: condition}"

其中条件是计算结果为 true 或 false 的 JavaScript 表达式。

示例：

假设您有一个对象 obj，其属性 value1 设置为“someothervalue”。您可以使用以下 ngClass 表达式有条件地将 CSS 类“test”应用于元素：

<span ng-class="{test: obj.value1 == 'someothervalue'}">test</span>

如果 obj.value1 等于“someothervalue”，则“test”类将应用于该元素.

真假表达：

ngClass 指令将表达式计算为“true”或“falsey”值。 true 值（例如“true”、“1”、“yes”）将应用该类，而 false 值（例如“false”、“0”、“no”）将不应用该类。

复杂表达式：

如果你的条件逻辑变得太复杂，你可以使用返回 true 或 false 值的函数。

示例：

<span ng-class="{test: checkValue1()}">test</span>

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

逻辑表达式：

您还可以使用逻辑运算符构成逻辑表达式ngClass.

示例：

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

如果 obj.value1 等于 'someothervalue' 或 obj.value2 等于，则此表达式将应用 'test' 类等于“其他东西”。

以上是如何在 AngularJS ngClass 中使用条件表达式？的详细内容。更多信息请关注PHP中文网其他相关文章！