Question

我对角js很新。在我的项目中，场景如下：

有两个名为style1和style2的类。

要求在模板本身中应用2个带有ng-class属性的样式。我没有使用单独的函数，但是一个名为＆＃39; bool＆＃39;的布尔值。这是动态的。

以下是条件

if（bool）然后是style1＆amp; sytle2适用于别的style1适用。

例如：

<input ng-class="something"/>

我的案例分配了每个类值超过1个类值需要分配。

请帮助我将此逻辑放在ng-class中。我尝试了很多方法但没有用。

Answer 1

＆＃13;

function TodoCtrl($scope) {
  $scope.bool = true;
}

＆＃13;

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-class="{'style1 style2' : bool, style1 : !bool}">
      Hello World!
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果我理解你的问题

<div ng-if="thisistrue" ng-class="style1">
  blah
</div>
<div ng-if="otheristrue" ng-class="[style2,style3]">
  blah
</div>

Answer 3

您可以按以下步骤操作：

根据您提供的说明：始终应用style1，而不管bool变量返回的值（不知道为什么命名变量bool总是使用有意义的名称，如{{ 1}}）

只需使用class属性应用Isstyle2Applied。
根据您的情况，style1使用ng-class。
当条件为style2时，这两个类都将应用于所需的true

HTML
element

function TodoCtrl($scope) {
  $scope.bool = true;
  $scope.bool2 = false;
}

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

Answer 4

@anu的答案很好。但是对于你的条件; ＆＃34; if（bool）然后是style1＆amp;应用了sytle2 applied else style1。＆＃34;

style1更改文字颜色 style2更改背景颜色

所以，如果boolean = true，则应用文本和背景， if false仅应用文本颜色。

＆＃13;

function TodoCtrl($scope) {
  $scope.bool = true;
}

＆＃13;

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-class="{'style1 style2' : bool, style1 : !bool}">
      Hello World!
    </div>
  </div>
</div>

＆＃13;

享受学习＆＃39; Angular＆＃39; ：）

如何在角度js的ng-class中放置多个具有多个条件的类值？

4 个答案: