AngularJS ngClass条件

html CSS

猿神奇梅

2020-03-18

有什么办法可以表达ng-class条件表达式吗？

例如，我尝试了以下方法：

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

此代码的问题在于，无论如何obj.value1，类测试始终应用于元素。这样做：

<span ng-class="{test: obj.value2}">test</span>

只要obj.value2不等于真实值，就不会应用该类。现在，我可以通过执行以下操作解决第一个示例中的问题：

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

该checkValue1函数如下所示：

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

我只是想知道这ng-class是否应该工作。我还在建立一个自定义指令，在其中我想做类似的事情。但是，我找不到观察表达式的方法（也许这是不可能的，以及它如此工作的原因）。

这是显示我的意思的plnkr。

第2044篇《AngularJS ngClass条件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
阳光Itachi村村 2020.03.18

当有人必须运行复杂的逻辑来确定适当的CSS类时，将功能与ng-class一起使用是一个不错的选择。

http://jsfiddle.net/ms403Ly8/2/

HTML：

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS：

.testclass { Background: lightBlue}

JavaScript：

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android