如何基于另一个元素的类使用 AngularJS ng-Class 条件？

Posted 2023-03-05

【中文标题】如何基于另一个元素的类使用 AngularJS ng-Class 条件？

【英文标题】：How to use AngularJS ng-Class condition based on another element's class?

【发布时间】：2016-03-20 22:22:07

【问题描述】：

<div id="parent" ng-class="testClass:???">
   <span id="child" class="test"/>
</div>

在这个例子中，如果子元素有一个类test，我该怎么做，父元素会动态地有一个类testClass？

【问题讨论】：

你控制孩子的班级吗？我的意思是它以某种形式显然是动态的，但如果它没有用ng-class 设置，它是如何设置的？

AngularJS ngClass conditional的可能重复

【参考方案1】：

您可以创建一个范围变量来验证这两个元素是否应该可见。 内部跨度也应该根据您的描述动态设置。所以你也可以使用 ng-class 。 所以代码可以是这样的：

<div id="parent" ng-class="testClass : isValid">
    <span id="child" ng-class="test : isValid"/>
</div>

【参考方案2】：

您可以在 ng-class 中添加三元条件，如

var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">

并将类放入您的 css 文件中

.class-if-truecolor=black
.class-if-falsecolor=white