Angular Js将一个固定的ng类和同一标记中的一个表达式组合在一起

Angular Js combine a fixed ng-class with an expression in same tag?

本文关键字：一个 表达式 在一起 组合 Js ng Angular      更新时间：2023-09-26

我有一个标签：

<body ng-cloak class="foobar" ng-class="{'fixed-header': settings.isFixed}">

在另一个类似的项目中，我有一个类似：

<body ng-cloak class="foobar" ng-class="routeClassName">

如何同时应用routeClassName和条件类？

我试过

<body ng-cloak class="foobar" ng-class="{'routeClassName','fixed-header': settings.isFixed}">

和类似的，但它抛出了一个错误。所以我想我的语法是错误的…

有两种方法可以实现这一点：

首先，只要让Angular插值，因为它只是类名字符串，然后使用ngClass作为条件：

<body ng-cloak class="foobar {{routeClassName}}" ng-class="{'fixed-header': settings.isFixed}">

第二，在你尝试过的语句中使用true：

<body ng-cloak class="foobar" ng-class="{'routeClassName': true, 'fixed-header': settings.isFixed}">

我倾向于第一个选项，因为ngClass用于基于表达式的条件类。

对于更新版本的angular（从1.4.0开始，可能更早），一个更好的解决方案是通过ng class的数组表示法添加类：

<body class="foobar" 
      ng-class="[{'fixed-header': settings.isFixed}, routeClassName]">

一个工作示例：

angular.module('test',[]);
.blue{
background: blue;
}
.red {
  border: 10px solid red;
  
}
.green{
  border: 10px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<body ng-app="test"
      ng-class="[{'blue': boolVar}, strVar]">
  <button type="button"
          ng-click="boolVar=!boolVar;">Toggle Bool ({{boolVar}})</button>
  
  <input type="text" 
         ng-init="strVar='green';"
         ng-model="strVar">
</body>

您可以使用三元语句和字符串串联来获得所需的效果：

<body ng-cloak class="foobar" ng-class="(settings.isFixed ? 'fixed-header ' : '') + routeClassName">

请确保在条件类名后面添加空格，以便串联正常工作。

相关文章：