angularjs 如何在Angular.js的ng-class中放置多个具有多个条件的类值?

lnlaulya  于 12个月前  发布在  Angular
关注(0)|答案(4)|浏览(147)

我对Angular.js非常陌生,在我的项目中,有两个类,分别名为style1和style2。
要求是在模板本身中应用两个带有ng-class属性的样式。我没有使用单独的函数,而是使用一个名为'bool'的动态布尔值。
以下是条件
if(bool)则style1和style2适用
否则style1适用。
例如:

<input ng-class="something"/>

字符串
每一个类值被分配我的情况下,超过1个类值是需要分配。
我怎么能把这个逻辑放进ng-class呢?我试了这么多方法,但都没用。

yshpjwxd

yshpjwxd1#

function TodoCtrl($scope) {
  $scope.bool = true;
}
.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}
<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>
6l7fqoea

6l7fqoea2#

如果我没理解错的话

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

字符串

k2arahey

k2arahey3#

您可以按以下步骤操作:
根据您提供的描述:无论bool变量返回的值如何,style1总是应用(不知道为什么命名变量bool总是使用像Isstyle2Applied这样有意义的名称)

  • 只需使用class属性应用style1
  • 根据您的情况使用ng-class作为style2
  • 当条件为true时,两个类都将应用于所需的HTML element
function TodoCtrl($scope) {
  $scope.bool = true;
  $scope.bool2 = false;
}
.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div class='style1' ng-class="{'style2' : bool}">
      Hello World!
    </div>
    <br>
    <div class='style1' ng-class="{'style2' : bool2}">
      Hello World!
    </div>
  </div>
</div>
wtzytmuj

wtzytmuj4#

@anu的回答很好。但是对于你给出的条件;“if(bool)then the style 1 & sytle 2 applied else style 1 is applied.”
style 1更改文本颜色style 2更改背景颜色
因此,如果boolean = true,则应用文本和背景,如果false,则仅应用文本颜色。

function TodoCtrl($scope) {
  $scope.bool = true;
}
.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}
<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>

享受学习'Angular':)

相关问题