Angular Js объединяет фиксированный ng-класс с выражением в одном и том же теге?

У меня есть тег:

<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}">

и тому подобное, но оно вызывает ошибку. Поэтому я думаю, что мой синтаксис отключен....

Ответы

Ответ 1

Вот два способа сделать это:

Прежде всего, просто 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 предназначен для условных классов, основанных на выражениях.

Ответ 2

Лучшим решением для более поздних версий angular (начиная с 1.4.0, возможно, раньше) является добавление класса через нотацию массива ng-класса:

<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>

Ответ 3

Вы можете использовать тройную инструкцию и конкатенацию строк, чтобы получить желаемый эффект:

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